Чому не можна отримати доступ до $ rootScope у шаблоні директиви з ізоляцією?

Зі сферою ізоляції шаблон директиви, здається, не може отримати доступ до змінної $ rootScope контролера ('Ctrl'), яка, однак, відображається в контролері директиви. Я розумію, чому змінну $ 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: {},

Ви можете спробувати цей вихід, використовуючи $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);
                }
            }]
        };
    });

Як правило, слід уникати використання $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;
})

Ось вилка вашої скрипки, яка демонструє, як ви можете використовувати будь-яку з них

1) Через те, що область ізоляції $scopeу вашому контролері Ctrl та в директиві контролер не посилаються на одну і ту ж область - скажімо, у нас є область 1 у Ctrl та область2 у директиві.

2) Через область ізоляції область2 не прототипово успадковується від $rootScope; так що якщо ви визначите $rootScope.blah, немає шансів, ви можете побачити це в scope2 .

3) Те, до чого ви можете отримати доступ у своєму шаблоні директиви, це scope2

Якщо підсумувати, то ось схема успадкування

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


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

Я знаю це давнє запитання. Але це не задовольнило мою запит про те, чому ізольована область не зможе отримати доступ до властивостей у $ rootcope.

Тож я зарився в кутову лібу і виявив -

$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, коли створюється новий обсяг. Тут зрозуміло, що будь-який ізольований обсяг не є прототиповим успадкуванням кореневого копа. швидше, лише rootcope додано як властивість '$ root' у новій області. Отже, ми можемо отримати доступ до властивостей rootcope лише з властивості $ root у новому ізольованому полі.