Dlaczego nie można uzyskać dostępu do $ rootScope w szablonie dyrektywy z izolowanym zakresem?

Wydaje się, że w przypadku zakresu izolowanego szablon dyrektywy nie ma dostępu do zmiennej kontrolera ('Ctrl') $ rootScope, która jednak pojawia się w kontrolerze dyrektywy. Rozumiem, dlaczego zmienna kontrolera („Ctrl”) $ scope nie jest widoczna w zakresie izolowanym.

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

Dostęp do zmiennej uzyskuje się bez zakresu izolowanego - co można zobaczyć, komentując wiersz zakresu izolowanego:

        // scope: {},

Możesz wypróbować ten sposób za pomocą $root.blah

Kodeks roboczy

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

Ogólnie rzecz biorąc, należy unikać używania $rootScopedo przechowywania wartości, które należy udostępniać między kontrolerami i dyrektywami. To jak używanie globali w JS. Zamiast tego skorzystaj z usługi:

Stała (lub wartość ... użycie jest podobne):

.constant('blah', 'blah')

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

Fabryka (lub usługa lub dostawca):

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

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

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

    return blah;
})

Oto widelec twojego Fiddle pokazujący, jak możesz użyć jednego z nich

1) Z powodu izolowanego zakresu $scopew kontrolerze Ctrl iw dyrektywie kontroler nie odwołuje się do tego samego zakresu - powiedzmy, że mamy zakres1 w Ctrl, a zakres2 w dyrektywie.

2) Ze względu na izolowany zakres zakresu2 nie dziedziczą prototypowo z $rootScope; więc jeśli zdefiniujesz, $rootScope.blahże nie ma szans, możesz to zobaczyć w zakresie 2 .

3) To, do czego możesz uzyskać dostęp w swoim szablonie dyrektywy, to scope2

Jeśli podsumuję, oto schemat dziedziczenia

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


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

Wiem, że to stare pytanie. Ale nie zadowoliło mnie to, dlaczego izolowany zakres nie może uzyskać dostępu do właściwości w $ rootscope.

Więc pogrzebałem w kanciastej libi i znalazłem -

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

Jest to funkcja wywoływana przez angular za każdym razem, gdy tworzony jest nowy zakres. Tutaj jest jasne, że żaden izolowany zakres nie dziedziczy prototypowo zakresu głównego. raczej tylko zakres główny jest dodawany jako właściwość „$ root” w nowym zakresie. Dlatego możemy uzyskać dostęp do właściwości rootscope tylko z właściwości $ root w nowym izolowanym zakresie.