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

С областью выделения шаблон шаблона, похоже, не может получить доступ к переменной контроллера ('Ctrl') $rootScope, которая, однако, появляется в контроллере директивы. Я понимаю, почему переменная scope контроллера ('Ctrl') $не видна в области выделения.

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: {},

Ответы

Ответ 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);
                }
            }]
        };
    });

Ответ 2

Как правило, вам следует избегать использования $rootScope для хранения значений, которые необходимо разделить между контроллерами и директивами. Это похоже на использование глобалов в JS. Вместо этого используйте службу:

Константа (или значение... использование похоже):

.constant('blah', 'blah')

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

A factory (или служба или поставщик):

.factory('BlahFactory', function() {
    var blah = {
        value: 'blah'
    };

    blah.setValue = function(val) {
      this.value = val;
    };

    blah.getValue = function() {
        return this.value;
    };

    return blah;
})

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

Ответ 3

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

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

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

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

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


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

Ответ 4

Я знаю это старый вопрос. Но это не удовлетворило мою просьбу о том, почему изолированная область не сможет получить доступ к свойствам в $ rootcope.

Так что я покопался в angular библиотеке и нашел -

$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 всякий раз, когда создается новая область. Здесь ясно, что любая изолированная область не является прототипом наследования корневого раздела. скорее только корневая область добавляется как свойство $ root в новой области видимости. Таким образом, мы можем получить доступ к свойствам rootscope только из свойства $ root в новой изолированной области видимости.