为什么不能在具有隔离范围的指令的模板中访问$ rootScope？

在隔离作用域中，伪指令的模板似乎无法访问控制器（'Ctrl'）$ rootScopevariables，但是它确实出现在伪指令的控制器中。 我明白为什么控制器（'Ctrl'）$ scopevariables在隔离范围中是不可见的。

HTML：

<div ng-app="app"> <div ng-controller="Ctrl"> <my-template></my-template> </div> <script type="text/ng-template" id="my-template.html"> <label ng-click="test(blah)">Click</label> </script> </div> 

JavaScript的：

 angular.module('app', []) .controller('Ctrl', function Ctrl1($scope, $rootScope) { $rootScope.blah = 'Hello'; $scope.yah = 'World' }) .directive('myTemplate', function() { return { restrict: 'E', templateUrl: 'my-template.html', scope: {}, controller: ["$scope", "$rootScope", function($scope, $rootScope) { console.log($rootScope.blah); console.log($scope.yah);, $scope.test = function(arg) { console.log(arg); } }] }; }); 

的jsfiddle

variables被访问时没有隔离作用域 – 可以通过注释隔离作用域行来看到：

  // scope: {}, 

Answer 1

你可以用$root.blah来试试这个方法

工作代码

HTML

  <label ng-click="test($root.blah)">Click</label> 

JavaScript的

  angular.module('app', []) .controller('Ctrl', function Ctrl1($scope, $rootScope) { $rootScope.blah = 'Hello'; $scope.yah = 'World' }) .directive('myTemplate', function() { return { restrict: 'E', templateUrl: 'my-template.html', scope: {}, controller: ["$scope", "$rootScope", function($scope, $rootScope) { console.log($rootScope.blah); console.log($scope.yah); $scope.test = function(arg) { console.log(arg); } }] }; }); 

Answer 2

通常，您应该避免使用$rootScope来存储您需要在控制器和指令之间共享的值。 这就像在JS中使用全局variables。 改为使用服务：

一个常量（或值…使用是相似的）：

 .constant('blah', 'blah') 

https://docs.angularjs.org/api/ng/type/angular.Module

工厂（或服务或提供者）：

 .factory('BlahFactory', function() { var blah = { value: 'blah' }; blah.setValue = function(val) { this.value = val; }; blah.getValue = function() { return this.value; }; return blah; }) 

这是你的小提琴的一把叉，展示你如何使用

Answer 3

1）由于在您的控制器Ctrl和指令控制器中的隔离作用域$scope不引用相同的作用域 – 假设我们在Ctrl中使用scope1，在指令中使用scope2 。

2）由于隔离作用域scope2 不能从$rootScope原型inheritance; 所以如果你定义$rootScope.blah ，你就不可能在scope2中看到它。

3）你可以在你的指令模板中访问什么是scope2

如果我总结一下，这里是inheritance模式

  _______|______ | | VV $rootScope scope2 | V scope1 $rootScope.blah > "Hello" scope1.blah > "Hello" scope2.blah > undefined