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";
      });

   }
})();

这里，当页面第一次呈现时，标题将是＆＃34; first＆＃34;。在单击某个其他指令上的某个按钮时，将发出该事件并调用$ scope.on，但不会呈现新值。

由于

Answer 1

以下对我来说很好。我在控制器中使用它，因为它是控制器的推荐语法。

我也会将其影响到局部变量，以便能够在$on函数中访问它。

在原始代码段中，您也没有显示任何内容，titleName的插值位于left-header代码的title属性级别。

＆＃13;

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";
      });

   }

＆＃13;

<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>

＆＃13;

Angular双向绑定在指令模板内不起作用

1 个答案: