我可以将一个服务注入到AngularJS的指令中吗？

14 浏览
0 Comments

我可以将一个服务注入到AngularJS的指令中吗？

我试图将服务注入到指令中，代码如下：\n

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

\n但是这给我返回了一个错误Unknown provider: myDataProvider。请有人帮忙看看代码，告诉我是否做错了什么？

0

3 答案

0 Comments

AngularJS中的指令（directive）是用来创建可重用组件的一种方式。在某些情况下，我们希望在指令中使用某个服务（service）。本文将介绍如何在AngularJS的指令中注入一个服务，并提供了解决方法。

在AngularJS中，我们可以使用$injector服务来获取任何我们想要的服务。这在我们事先不知道服务名称但了解服务接口的情况下非常有用。例如，我们想要创建一个指令，将一个表格插入到ngResource的端点，或者创建一个通用的删除记录按钮，可以与任何API端点进行交互。我们不希望为每个控制器或数据源重新实现表格指令。

以下是一个示例代码：

template.html

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

0
0 Comments

问题的出现的原因是：在AngularJS中，很少有必要将服务注入到指令中。如果将服务（通常是数据源或模型）注入到指令（视图的一部分）中，将会在视图和模型之间创建直接的耦合。需要通过使用控制器将它们分离出来。

解决方法是：

1. 将指令定义从app.module改为app.directive。

2. 如果遇到问题，可以提供示例代码或将代码放在fiddle中，以便其他人可以帮助解决问题。

3. 如果在函数参数中定义了注入，但在函数内部没有实际引用注入的服务，AngularJS将不会执行注入。可以在调试器中注意到这种行为。

这里还提到了一个使用工厂和指令的示例：使用Google APIs经常会得到一个API的实例作为Javascript对象。服务可以保存特定实例，以便每次使用时不必实例化多个对象。此外，使用提供者可以嵌入API的加载。然后可以在Angular的.run方法中调用提供者的初始化，加载API并保存实例供其他人使用。

对于将服务注入到指令中是否合适的讨论，某些情况下了使用外部控制器作为替代方法的想法，并分享了一个有关组件化AngularJS指令的链接。

总之，问题的出现是因为将服务注入到指令中可能导致视图和模型之间的直接耦合。解决方法是将指令定义改为app.directive，并通过提供示例代码或放在fiddle中来寻求帮助。另外，还分享了一个使用工厂和指令的示例以及使用外部控制器的替代方法的讨论。

0
0 Comments

在AngularJS中，可以对指令进行依赖注入，与其他地方一样。下面的代码演示了如何在指令中进行依赖注入：

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

这段代码中，指令"changeIt"依赖于名为"myData"的服务。在link函数中，通过将myData的name属性赋值给scope的name属性，实现了对服务的注入。

一个用户提到了在返回{}之前需要添加"_myData = myData"并在link函数中使用_myData的情况。另一个用户对此表示了赞同，并问道为什么需要这样做。另一位用户回答说这是因为闭包的原因，并提供了一个链接解释闭包的概念。

有人询问是否有解决方法，如果想要在指令调用之外创建link函数的情况下进行依赖注入。还有人问是否可以注入多个服务。

总结起来，原因是AngularJS允许对指令进行依赖注入，解决方法是在指令定义中使用数组语法来注入服务，并在link函数中使用注入的服务。如果想在指令调用之外创建link函数，可能需要进行一些额外的操作。同时，可以注入多个服务。

以上是关于"Can I inject a service into a directive in AngularJS?"问题的原因和解决方法的整理。

0