爲什麼在具有隔離範圍的指令的模板中不能訪問$ rootScope？

Question

使用隔離範圍時，指令的模板似乎無法訪問控制器（'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: {}, 

Answer 1

你可以試試這個出路使用$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）由於中隔離範圍$scope在您的控制器Ctrl和指令控制器中不涉及相同的範圍 - 讓我們說我們有範圍1在Ctrl和範圍2 in指令。

2）由於分離範圍的scope2不 prototypicallly從$rootScope繼承;所以如果你定義$rootScope.blah，你就不可能在scope2中看到它。

3）你可以在你的指令模板訪問是scope2

如果我總結一句話，這裏是繼承模式

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


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

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

這裏是一個fork of your Fiddle演示如何使用兩種