如何根据angular中的指令属性注入服务？

Question

我有以下指令

directiveModule.directive('typeahead', function() {
    return {
        restrict: 'E',
        transclude: true,
        scope: 'isolate',
        templateUrl: 'assets/partials/common/typeahead.html' ,
        controller: ["$scope","$element","$attrs","$transclude", "Event", 
        function ($scope,$element,$attrs,$transclude, Event){
            console.log(eval($attrs.service + ".query();"));

            $scope.search = function(){ console.log("Searching for:" + $scope.selectedValue) };
            $scope.selectedValue = "";
            $scope.providedItems = []; 
        }],     
    };
});

使用以下模板:

<div>
<input ng-change="search()" ng-model="selectedValue" ng-click="log()" autocomplete="off" type="text"/>
<ul class=".typeahead">
    <li ng-repeat="item in providedItems">{{eval(item + "." + descriptor)}}</li>
</ul>

以及我视图中的以下调用:

我想在注入指令中的控制器时,在运行时评估service属性.所以它现在说的地方

controller: ["$scope","$element","$attrs","$transclude", "Event", 
        function ($scope,$element,$attrs,$transclude, Event){

它会说类似于:

controller: ["$scope","$element","$attrs","$transclude", eval($attrs.service), 
        function ($scope,$element,$attrs,$transclude, eval($attrs.service)){

但是我无法从directiveModule调用中的范围访问$ attrs.

如果有任何方法可以访问视图中声明的服务就足够了.请帮忙!

Answer 1

对此的一个解决方案是自己创建和绑定控制器.您只需要注入两个$injector(为了动态地解析服务)和$controller(为了动态地解析控制器).在您的链接功能中,您自己创建控制器:

link: function(scope, elm, attr) {
  $controller(function YourController($scope, dynamnicService) {
      dynamicService.query();
    }, {
      $scope: scope, 
      dynamicService: $injector.get($attr.service)
    }
  )
}

这里有一件重要的事情.在这个例子中,我正在考虑你的服务是element属性中的一个字符串.如果它是范围内的字符串,由属性引用,那么您必须更改方法.您应该$attr.observe使用属性,并且在更改时,您应该获取服务$injector.get(...)并将其传递给控制器​​.你应该this.setService在控制器本身或$scope.setService方法上创建一个方法,你的呼叫.我宁愿控制器,因为这与访问服务有关.使用第二种方法,您不需要手动创建控制器,您可以简单地公开此方法并从外部设置数据.

还有一个信息,你不应该从控制器上接触DOM.所以路过$element,$attr和$transculde控制器可能是一个坏主意,不管是什么.

看看有关的文档$controller,$injector并指令.