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方法中创建您的呼叫。我宁愿控制器，因为这与访问服务有关。使用第二种方法，您不需要手动创建控制器，您可以简单地公开此方法并从外部设置数据。

还有一个信息，你应该NEVER TOUCH THE DOM FROM YOUR CONTROLLER。因此，将$element，$attr和$transculde传递给控制器可能是一个坏主意，无论如何。

查看有关$controller，$injector和directive的文档。

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

1 个答案: