通過控制器無法訪問$ rootScope

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。

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上的演示

通過控制器無法訪問$ rootScope

問題描述

1 個解決方案

解決方案1
2 2016-02-11 19:21:18

最佳實踐

通過控制器無法訪問$ rootScope

問題描述

1 個解決方案

解決方案1 2 2016-02-11 19:21:18

最佳實踐

解決方案1
2 2016-02-11 19:21:18