Warum kann in der Vorlage einer Direktive mit isoliertem Gültigkeitsbereich nicht auf $ rootScope zugegriffen werden?

Mit isolate scope scheint die Vorlage der Direktive nicht in der Lage zu sein, auf die Variable $ rootScope des Controllers ('Ctrl') zuzugreifen, die jedoch im Controller der Direktive angezeigt wird. Ich verstehe, warum die $ scope-Variable des Controllers ('Ctrl') im isolierten Bereich nicht sichtbar ist.

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

Auf die Variable wird ohne isolierten Bereich zugegriffen - wie aus dem Kommentar der isolierten Bereichszeile hervorgeht:

        // scope: {},

Sie können diesen Weg mit ausprobieren $root.blah

Arbeitscode

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

Im Allgemeinen sollten Sie vermeiden $rootScope, Werte zu speichern, die Sie zwischen Controllern und Direktiven teilen müssen. Es ist wie mit Globals in JS. Verwenden Sie stattdessen einen Dienst:

Eine Konstante (oder Wert ... Verwendung ist ähnlich):

.constant('blah', 'blah')

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

Eine Fabrik (oder ein Dienst oder ein Anbieter):

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

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

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

    return blah;
})

Hier ist eine Gabelung Ihrer Geige, die zeigt, wie Sie beide verwenden können

1) Aufgrund des isolierten Bereichs $scopein Ihrem Controller Ctrl und in der Direktive verweist Controller nicht auf denselben Bereich - sagen wir, wir haben scope1 in Ctrl und scope2 in der Direktive.

2) Wegen des isolierten Bereichs erben scope2 nicht prototypisch von $rootScope; Wenn Sie also definieren, $rootScope.blahdass es keine Chance gibt, können Sie es in scope2 sehen .

3) Auf was Sie in Ihrer Direktivenvorlage zugreifen können, ist scope2

Wenn ich es zusammenfasse, hier ist das Vererbungsschema

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


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

Ich weiß, dass dies eine alte Frage ist. Meine Befragung darüber, warum der isolierte Bereich nicht auf Eigenschaften im $ Rootscope zugreifen kann, wurde jedoch nicht befriedigt.

Also grub ich mich in die eckige Bibliothek und fand -

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

Dies ist die Funktion, die von angle aufgerufen wird, wenn ein neuer Bereich erstellt wird. Hier ist klar, dass ein isolierter Bereich das Rootscope nicht prototypisch erbt. Vielmehr wird im neuen Bereich nur das Rootscope als Eigenschaft '$ root' hinzugefügt. Daher können wir nur über die Eigenschaft $ root im neuen isolierten Bereich auf die Eigenschaften von Rootscope zugreifen.