通过控制器访问$rootScope不起作用

我有以下代码，它试图通过指令将变量添加到$rootScope，并尝试获取该值并将其显示在控制器元素中。

但是当我单击指令内的链接时，它不会显示新的$rootScope变量。

https://plnkr.co/edit/P7Lq7h13RmXryFC0uBMi?p=info

var mod = angular.module('myApp', []);
mod.directive('mainMenu', menuDirec);
function menuDirec($rootScope){
  return {
    templateUrl: 'menu.html',
    restrict: 'A',
    controller: menuControl,
    controllerAs: 'vm'
  };
  function menuControl(){
    var vm = this;
    vm.menu = {
      'one': 'Link 1',
      'two': 'Link 2',
      'three': 'Link 3',
      'four': 'Link 4'
    };
    vm.clickMenu = function(slug){
      $rootScope.active = slug;
      console.log($rootScope);
      console.log(slug);
    }
  }
}
mod.controller('content', contentControl);
function contentControl($scope, $rootScope){
  $scope.title = $rootScope.active;
}

更改 HTML 以将标题作为函数访问

  <div ng-controller="content">
    <h1>{{ title() }}</h1>
  </div>

在你的JS中让它成为一个函数

mod.controller('content', contentControl);
function contentControl($scope, $rootScope){
  $scope.title = function () {
    return $scope.active;
  };
}

然后，在每个摘要周期中，附加到{{title()}}的$watch将执行该函数并随着$scope.active值的变化更新 DOM。

PLNKR的更新。

最佳实践
避免用变量弄乱$rootScope。请改用隔离范围和双向绑定。有关更多信息，请参阅 AngularJS 综合指令 API - 范围。

作为示例

mod.directive('mainMenu', menuDirec);
function menuDirec(){
  return {
    templateUrl: 'menu.html',
    restrict: 'A',
    controller: menuControl,
    controllerAs: 'vm',
    scope: { active: '=' },
    bindToController: true
  };
  function menuControl(){
    var vm = this;
    vm.menu = {
      'one': 'Link 1',
      'two': 'Link 2',
      'three': 'Link 3',
      'four': 'Link 4'
    };
    vm.clickMenu = function(slug){
      vm.active = slug;
      console.log(slug);
    }
  }
}

.HTML

<body ng-app="myApp">
  <nav main-menu active="title"></nav>
  <div ng-controller="content">
    <h1>{{ title }}</h1>
  </div>
</body>

PLNKR上的演示

最佳实践

相关内容

最新更新

热门标签：