Почему нельзя получить доступ к $rootScope в шаблоне директивы с областью изоляции?

С изолированной областью шаблон директивы, похоже, не может получить доступ к переменной controller ('Ctrl') $rootScope, которая, однако, появляется в контроллере директивы. Я понимаю, почему переменная controller ('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: {},
3 77
javascript angularjs angularjs-directive

3 ответа:

вы можете попробовать этот способ с помощью $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);
                }
            }]
        };
    });
155

как правило, вы должны избегать использования $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;
})

здесь вилка вашей скрипки демонстрируя, как вы можете использовать либо

32

1) из-за изоляции области $scope в вашем контроллере Ctrl и в контроллере директив не относятся к одной и той же области - скажем, у нас есть scope1 в Ctrl и scope2 в директиве.

2) из-за изоляции области scope2не прототипически наследуют от $rootScope ; Так что, если вы определяете $rootScope.blah нет никаких шансов, вы можете увидеть его в scope2.

3) Что вы можете получить доступ в ваш шаблон директивы scope2

если я подведу итог, вот схема наследования

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


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