传递指令的属性值，以任何控制器

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类型功能将该功能封装在服务中，然后在需要时注入该功能。