Question

我有以下代码，它试图通过指令向$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;
}

Answer 1

更改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。

UPDATE on PLNKR。

最佳实践

避免使用变量使$rootScope混乱。而是使用隔离范围和双向绑定。有关详细信息，请参阅AngularJS Comprehensive Directive API - scope。

例如

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>

DEMO on PLNKR

通过控制器无法访问$ rootScope

1 个答案:

最佳实践