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

Question

对于隔离范围,指令的模板似乎无法访问控制器('Ctrl')$ rootScope变量,但该变量确实出现在指令的控制器中.我理解为什么控制器('Ctrl')$ 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

工作守则

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

这是你的小提琴的一个分支,展示你如何使用它们

Answer 3

1)由于的分离范围$scope在控制器Ctrl键并在指令控制器没有指向同一个范围-让我们说,我们已经scope1 Ctrl键和scope2的指令.

2)由于分离范围的scope2 不 prototypicallly从继承$rootScope; 因此,如果您定义$rootScope.blah,则无法在scope2中看到它.

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

如果我总结一下,这是继承模式

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


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