Угловое двустороннее связывание не работает внутри шаблона директивы

Question

У меня есть шаблон для директивы следующим образом.

(function() { 
    'use strict'; 

    angular 
     .module('testApp', []) 
     .directive('leftNav', leftNav); 

    /* @ngInject */ 
    function leftNav() { 
     return { 
     replace : true, 
     restrict: 'E', 
     template: '<div class="left-nav">' + 
     '<left-header title="{{LeftNavCtrl.titleName}}">' + 

     '</left-header>' + 
     '</div>', 
     controller: LeftNavController, 
     controllerAs: 'LeftNavCtrl', 
     bindToController: true 
     } 
    } 

    function LeftNavController($modal, $scope) { 

     var vm = this; 


     vm.titleName = "first"; 

     $scope.$on('changeTitle', function(event, args) { 
     vm.titleName = "second"; 
     }); 

    } 
})(); 

Здесь, когда страница получает визуализацию в первый раз, название будет «первым». И при нажатии кнопки на какой-либо другой директиве выдается событие, а вызов $ scope.on вызывается, но новое значение не отображается.

Thanks

Answer 1

Следующие работы отлично подходят для меня. Я использую это в контроллере, так как это рекомендуемый синтаксис с контроллером.

Я также воздействую на его локальную переменную, чтобы иметь возможность достичь ее в функции $on.

В вашем исходном фрагменте вы также ничего не показываете, интерполяция titleName находится на уровне атрибута title тега left-header.

angular 
 
     .module('testApp', []) 
 
     .directive('leftNav', leftNav) 
 
     .directive('button', ['$rootScope', button]); 
 

 
    /* @ngInject */ 
 
    function leftNav() { 
 
     return { 
 
     replace : true, 
 
     restrict: 'E', 
 
     template: '<div class="left-nav">' + 
 
     '<left-header title="{{LeftNavCtrl.titleName}}">{{LeftNavCtrl.titleName}}' + 
 
     '</left-header>' + 
 
     '</div>', 
 
     controller: LeftNavController, 
 
     controllerAs: 'LeftNavCtrl' 
 
     } 
 
    } 
 

 
    function button($rootScope) { 
 
     return { 
 
     replace : true, 
 
     restrict: 'E', 
 
     template: '<div class="left-nav" ng-click="changeTitle()">Broadcast' + 
 
     '</div>', 
 
     link: function($scope){ 
 
      $scope.changeTitle = function(){ 
 
      $rootScope.$broadcast('changeTitle'); 
 
      } 
 
     } 
 
     } 
 
    } 
 

 
    function LeftNavController($scope) { 
 
     var ctrl = this; 
 
     ctrl.titleName = "first"; 
 

 
     $scope.$on('changeTitle', function(event, args) { 
 
     ctrl.titleName = "second"; 
 
     }); 
 

 
    }

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.2/angular.min.js"></script> 
 

 
<div ng-app="testApp"> 
 
    <left-nav> 
 
    </left-nav> 
 
    <button></button> 
 
</div>