我可以在AngularJS的指令中注入服务吗?

我试图将服务注入如下指令:

 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;
            }
        }
 });

但这将返回我一个错误未知提供者:myDataProvider。有人能检查一下代码并告诉我是否我做错了什么吗?

当前回答

您还可以使用$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-26 08:25:26

其他回答

如果你使用指令作为一个单独的模块，需要导入服务如下

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

否则会像下面这样

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

2022-08-19 08:48:08

你可以在指令上进行注入，它看起来就像在其他地方一样。

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

2013-03-22 14:59:27

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

它确实工作得很好。我不知道你做错了什么。这是它工作的敲击声。

http://plnkr.co/edit/M8omDEjvPvBtrBHM84Am

2013-03-22 11:47:29