236

我正在尝试将服务注入如下指令： 

 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。有人可以查看代码并告诉我我是否做错了什么？

4

3 回答 3

389

您可以对指令进行注入，它看起来就像在其他任何地方一样。

app.directive('changeIt', ['myData', function(myData){
    return {
        restrict: 'C',
        link: function (scope, element, attrs) {
            scope.name = myData.name;
        }
    }
 }]);
于 2013-03-22T14:59:27.710 回答
19

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

它工作正常。我不确定你在做什么是错误的。这是它工作的一部分。

http://plnkr.co/edit/M8omDEjvPvBtrBHM84Am

于 2013-03-22T11:47:29.673 回答
11

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

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 端点交互的元素时非常有用。

于 2016-08-26T08:25:26.480 回答