javascript - 如何根据 Angular 指令属性注入(inject)服务？

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>

以及我认为的以下调用:

我想让服务属性在指令中注入(inject) Controller 时在运行时进行评估。所以它现在说的地方

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。

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

Answer 1

一个解决方案是自己创建和绑定(bind) Controller 。您只需要同时注入(inject) $injector(以便动态解析服务)和 $controller(以便动态解析 Controller )。在您的链接功能中，您自己创建 Controller :

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

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

多一个信息，你应该NEVER TOUCH THE DOM FROM YOUR CONTROLLER .因此，无论如何，将 $element、$attr 和 $transculde 传递给 Controller ​​可能不是一个好主意。

查看有关$controller、$injector 和directive 的文档.