Tại sao $ rootScope không thể được truy cập trong khuôn mẫu của một chỉ thị với phạm vi cô lập?

Với phạm vi cô lập, mẫu của chỉ thị dường như không thể truy cập vào biến điều khiển ('Ctrl') $ rootScope, tuy nhiên, biến này xuất hiện trong trình điều khiển của chỉ thị. Tôi hiểu tại sao biến phạm vi điều khiển ('Ctrl') $ không hiển thị trong phạm vi cô lập.

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

Biến được truy cập mà không có phạm vi cô lập - có thể thấy bằng cách nhận xét dòng phạm vi cô lập:

        // scope: {},

Bạn có thể thử cách này bằng cách sử dụng $root.blah

Mã làm việc

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

Nói chung, bạn nên tránh sử dụng $rootScopeđể lưu trữ các giá trị bạn cần chia sẻ giữa các bộ điều khiển và lệnh. Nó giống như sử dụng hình cầu trong JS. Sử dụng một dịch vụ thay thế:

Một hằng số (hoặc giá trị ... sử dụng tương tự):

.constant('blah', 'blah')

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

Một nhà máy (hoặc dịch vụ hoặc nhà cung cấp):

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

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

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

    return blah;
})

Đây là một nhánh của Fiddle của bạn trình bày cách bạn có thể sử dụng

1) Do phạm vi cô lập $scopetrong bộ điều khiển của bạn Ctrl và trong bộ điều khiển chỉ thị không tham chiếu đến cùng một phạm vi - giả sử chúng ta có phạm vi1 trong Ctrl và phạm vi2 trong chỉ thị.

2) Vì phạm vi cô lập scope2 không kế thừa nguyên mẫu từ $rootScope; vì vậy nếu bạn xác định $rootScope.blahthì không có cơ hội nào bạn có thể nhìn thấy nó trong scope2 .

3) Những gì bạn có thể truy cập trong mẫu chỉ thị của mình là scope2

Nếu tôi tổng hợp lại, đây là lược đồ kế thừa

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


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

Tôi biết đây là một câu hỏi cũ. Nhưng nó không thỏa mãn điều tra của tôi về lý do tại sao phạm vi bị cô lập sẽ không thể truy cập các thuộc tính trong $ rootcope.

Vì vậy, tôi đã tìm kiếm trong lib góc cạnh và tìm thấy -

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

Đây là hàm được gọi bởi góc bất cứ khi nào một phạm vi mới được tạo. Ở đây rõ ràng là bất kỳ phạm vi cô lập nào không phải là kế thừa nguyên mẫu của rootcope. thay vì chỉ rootcope được thêm vào dưới dạng thuộc tính '$ root' trong phạm vi mới. Vì vậy, chúng ta chỉ có thể truy cập các thuộc tính của rootcope từ thuộc tính $ root trong phạm vi cô lập mới.