傳遞指令的屬性值，以任何控制器

Question

我有多個元素與被叫scrollOffset指令例如

<section id="section1" scrollOffset="100"> 
... 
</section> 

<section id="section2" scrollOffset="100"> 
... 
</section> 

爲了理解起見，我想能夠從訪問scrollOffset屬性的值在屬於我的應用程序中任何模塊的任何容器中，如果我知道元素ID。

我的第一個問題是如何正確申報指令，因爲我已經看到了這樣做如

var myScroller = angular.module('scrollOffset', []); 

myScroller.directive('scrollOffset', function ($rootScope) { 

    return function (scope, element, attr) { 
     var offset = scope.$eval(attr.scrollOffset); 
    } 
}); 

我宣佈包含各種控制器單獨的模塊的多種方式。我想能夠訪問這些控制器中的scrollOffset屬性

var myControllers = angular.module ('myControllers', ['scrollOffset']); 

myControllers.controller('controller1', [ '$scope', '$rootScope', '$routeParams', 

function ($scope, $rootScope, $routeParams) { 

    if ($routeParams.scrollTo != 'undefined') { 

     // get the target element 
     var targetEl = document.getElementById ($routeParams.scrollTo); 

     // I want to fetch the scrollOffset attribute for targetEl here 
    } 
}]); 

我是Angular的新手，無法弄清楚這一點。問題的一部分是它看起來像是有多種方式可以解決這個問題。

Answer 1

任何時候你需要在多個地方的東西，你會想要使用依賴注入。對於這個例子，最簡單的方法是在模塊上使用value函數。例如：

myScroller.value("offsets", {}); 

然後，您可以在需要的地方注入offsets對象。在該指令可以在其上設置的值：任何你想要的控制器

myScroller.directive('scrollOffset', function ($rootScope, offsets) { 

    return function (scope, element, attr) { 
     var offset = scope.$eval(attr.scrollOffset); 
     offsets[element.id] = offset;     
    } 
}); 

然後，您可以從中讀取值：

myControllers.controller('controller1', [ '$scope', '$rootScope', '$routeParams', 'offsets', 

function ($scope, $rootScope, $routeParams, offsets) { 

    if ($routeParams.scrollTo != 'undefined') { 

     // get the target element 
     var targetEl = document.getElementById ($routeParams.scrollTo); 
     // to make sure have value, use $watch 
     $scope.$watch(function() { 
      return offsets[$routeParams.scrollTo]; 
     }, function(newVal) { 
      if (angular.isDefined(newVal) 
      { 
       //do whatever you need to do with the value 
      } 
    } 
}]); 

如果你不想被自己到處曝光的物體，您可以使用getter/setter類型功能將該功能封裝在服務中，然後在需要時注入該功能。