Tại sao không thể truy cập $ rootScope trong mẫu của chỉ thị với phạm vi cách ly?

Question

Với phạm vi cô lập, mẫu của chỉ thị dường như không thể truy cập bộ điều khiển ('Ctrl') biến $ rootScope, tuy nhiên, không xuất hiện trong bộ điều khiển của chỉ thị. Tôi hiểu tại sao bộ điều khiển ('Ctrl') biến $ scope 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 không có phạm vi cô lập - như có thể thấy bằng cách bình luận dòng phạm vi cô lập:

 // scope: {}, 

Answer 1

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

Working Code

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

Answer 2

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

2) Do phạm vi cô lập scope2không prototypicallly kế thừa từ $rootScope; vì vậy nếu bạn xác định $rootScope.blah thì 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 bạn là scope2

Nếu tôi tóm tắt, đây là sơ đồ thừa kế

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


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

Answer 3

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à chỉ thị. Nó giống như sử dụng globals trong JS. Sử dụng dịch vụ thay thế:

Giá trị không đổi (hoặc giá trị ...sử dụng là 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 fork of your Fiddle chứng minh làm thế nào bạn có thể sử dụng một trong hai