ディレクティブテンプレート内で角2方向バインディングが機能しない

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が呼び出されますが、新しい値はレンダリングされません。

ありがとうございます。

Answer 1

以下は私にとってうまくいきます。 私はコントローラーでこれを使用します。これはコントローラーとして推奨される構文です。

$on関数では、ローカル変数にも影響します。

オリジナルのスニペットでは、何も表示されません。titleNameの補間はleft-headerタグのタイトル属性のレベルにあります。あなたが時計に最初のもののために$ scope.titleNameを使用して、vm.titleNameている理由

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>