$ rootScope, yalıtma kapsamı olan bir yönerge şablonunda neden erişilemiyor?

Question

Yalıtkanın kapsamı ile, yönerge şablonu denetleyiciye ('Ctrl') $ rootScope değişkenine erişemiyor gibi görünmektedir, ancak direktifin denetleyicisinde görünmektedir. Denetleyici ('Ctrl') $ kapsam değişkeninin neden yalıtımda görünmediğini anlıyorum.

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

değişken bir izolat kapsamı ile erişilir - izolatı kapsamı hattı yorumlayarak görülebileceği gibi:

 // scope: {}, 

Answer 1

Sen $root.blah

Working Code

HTML kullanarak bu şekilde deneyebilirsiniz Çünkü

<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) denetleyiciniz Ctrl'de ve yönerge denetleyicide $scope izolatını ayırma, aynı kapsamı göstermez - diyelim, Ctrl'de kapsam1 ve yönerge içinde kapsam2.

2) için izole kapsamı scope2prototypicallly $rootScope devralamaz yapmak; $rootScope.blah'u tanımladığınızda kapsam2'da görmeniz mümkün değildir.

3) Ne sizin yönergesi şablonunda erişebileceği değerleri depolamak için $rootScope kullanmaktan kaçınmalısınız, bunu özetlemek durumunda scope2

, burada Genellikle miras şema

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


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

Answer 3

olduğunu Kontrolörler ve direktifler arasında paylaşmanız gerekir. JS'de globals kullanmak gibi. Bunun yerine bir hizmet kullanın:

Bir sabit (veya ...kullanım) benzer:

.constant('blah', 'blah') 

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

bir fabrika (veya hizmet veya sağlayıcı): Burada

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

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

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

    return blah; 
}) 

ekleyenler kullanmak ya