Question

使用隔离范围时，指令的模板似乎无法访问控制器（＆＃39; Ctrl＆＃39;）$ rootScope变量，但该变量确实出现在指令的控制器中。我理解为什么控制器（＆＃39; Ctrl＆＃39;）$ scope变量在隔离范围内不可见。

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

访问变量时没有隔离范围 - 通过注释隔离范围行可以看出：

        // scope: {},

Answer 1

您可以使用$root.blah

尝试这种方式

<强> Working Code

<强> 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中使用全局变量一样。改为使用服务：

常数（或值......使用类似）：

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

这是一个fork of your Fiddle，演示了如何使用

Answer 3

1）由于控制器Ctrl和指令控制器中的隔离范围$scope没有引用相同的范围 - 让我们说在Ctrl和 scope1 > scope2 在指令中。

2）由于隔离范围 scope2 不原型继承自$rootScope;因此，如果您定义$rootScope.blah，则无法在 scope2 中看到它。

3）您可以在指令模板中访问的内容是 scope2

如果我总结一下，这是继承架构

    _______|______
    |            |
    V            V
$rootScope     scope2
    |
    V
  scope1


$rootScope.blah
> "Hello"
scope1.blah
> "Hello"
scope2.blah
> undefined

Answer 4

我知道这是一个老问题。但这并不能满足我的询问，即为什么孤立的作用域将无法访问$ rootscope中的属性。

所以我挖了角形库，发现-

$new: function(isolate) {
  var ChildScope,
      child;

  if (isolate) {
    child = new Scope();
    child.$root = this.$root;
    child.$$asyncQueue = this.$$asyncQueue;
    child.$$postDigestQueue = this.$$postDigestQueue;
  } else {

    if (!this.$$childScopeClass) {
      this.$$childScopeClass = function() {
        // blah blah...
      };
      this.$$childScopeClass.prototype = this;
    }
    child = new this.$$childScopeClass();
  }

这是每当创建新作用域时由angular调用的函数。显然，任何隔离范围都不是原型继承的rootscope。而是只有rootscope被添加为新作用域中的属性“ $ root”。因此，我们只能从新的隔离范围中的$ root属性访问rootscope的属性。

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

4 个答案: