我可以将服务注入指令吗？

Question

我正在尝试将服务注入到如下的指令中:

 var app = angular.module('app',[]);
 app.factory('myData', function(){
     return {
        name : "myName"
     }
 });
 app.directive('changeIt',function($compile, myData){
    return {
            restrict: 'C',
            link: function (scope, element, attrs) {
                scope.name = myData.name;
            }
        }
 });

但这让我错了Unknown provider: myDataProvider.有人可以查看代码并告诉我,如果我做错了什么？

Answer 1

你可以对Directives进行注入,它看起来就像在其他任何地方一样.

app.directive('changeIt', ['myData', function(myData){
    return {
        restrict: 'C',
        link: function (scope, element, attrs) {
            scope.name = myData.name;
        }
    }
 }]);

Answer 2

将指令定义从更改app.module为app.directive.除此之外一切都很好. 顺便说一句,你很少需要将服务注入指令.如果要将服务(通常是数据源或模型)注入到指令中(这是视图的一部分),则会在视图和模型之间创建直接耦合.您需要使用控制器将它们连接在一起来将它们分开.

它确实工作正常.我不确定你在做什么是错的.这是一个工作的插件.

http://plnkr.co/edit/M8omDEjvPvBtrBHM84Am

Answer 3

您还可以使用$ inject服务来获得您喜欢的任何服务.如果我提前不知道服务名称但知道服务接口,我觉得很有用.例如,将表插入ngResource端点的指令或与任何api端点交互的通用删除记录按钮.您不希望为每个控制器或数据源重新实现表指令.

template.html

<div my-directive api-service='ServiceName'></div>

my-directive.directive.coffee

angular.module 'my.module'
  .factory 'myDirective', ($injector) ->
    directive = 
      restrict: 'A'
      link: (scope, element, attributes) ->
        scope.apiService = $injector.get(attributes.apiService)

现在您的'匿名'服务完全可用.例如,如果它是ngResource,则可以使用标准ngResource接口来获取数据

例如:

scope.apiService.query((response) ->
  scope.data = response
, (errorResponse) ->
  console.log "ERROR fetching data for service: #{attributes.apiService}"
  console.log errorResponse.data
)

我发现这种技术在制作与API端点交互的元素时非常有用.