分離スコープを持つディレクティブのテンプレートで$ rootScopeにアクセスできないのはなぜですか？

Question 1

分離スコープでは、ディレクティブのテンプレートはコントローラー（ 'Ctrl'）$ rootScope変数にアクセスできないようですが、ディレクティブのコントローラーには表示されます。コントローラ（ '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: {},

Question 2

あなたはを使用してこの方法を試すことができます $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);
                }
            }]
        };
    });

Question 3

一般に、$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;
})

これがフィドルのフォークで、どちらを使用するかを示しています。

Question 4

1）$scopeコントローラーの分離スコープのためにCtrlとディレクティブコントローラーは同じスコープを参照していません-Ctrlとscope2にscope1があるとしましょうディレクティブでは。

2）スコープが分離されているため、scope2 は典型的には$rootScope;から継承しません。したがって、定義する$rootScope.blahと、scope2に表示される可能性はありません。

3）ディレクティブテンプレートでアクセスできるのはscope2です

要約すると、これが継承スキーマです

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


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

Question 5

私はこれが古い質問であることを知っています。しかし、分離されたスコープが$ rootscopeのプロパティにアクセスできない理由についての私の質問には満足できませんでした。

だから私は角度のあるlibを掘り下げて見つけました-

$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プロパティからのみアクセスできます。