2013-03-17 131 views
58

所以我有一些插件和库我想用在我的角度应用程序和(目前)我只是简单地引用这些函数/方法,因为他们在99%的应用程序以完全忽略依赖注入的方式。AngularJS - 在服务,工厂,过滤器等依赖注入

我有(例如)处理格式和验证日期的JavaScript库“MomentJS”,我在控制器,服务和过滤器中的应用程序中使用它。我学习的方式(使用AngularJS)是创建一个引用该函数(及其方法)的服务,并将该服务注入到我的控制器中,这非常有效。

问题是我真的需要从服务到过滤器到控制器等所有不同类型的组件中引用这个库。所以,我想我的问题是你如何在过滤器,服务和其他不是控制器的其他东西中进行依赖注入?

这可能吗?这甚至是有益的吗?

任何帮助,将不胜感激:)

回答

100

是你可以使用依赖注入过滤器和指令

例:

筛选:

app.filter('<filter>', ['$http', function(http){ 
    return function(data){ 
    } 
}]); 

指令:

app.directive('<directive>', ['$http', function(http){ 
    return { 
     .... 
    } 
}]); 

服务:

app.factory('<service>', ['$http', function(http) { 
    var shinyNewServiceInstance; 
    return shinyNewServiceInstance; 
}]); 
+7

这正是我一直在寻找:) – 2013-03-17 05:17:44

+1

有什么办法弯曲语法注入依赖成为供应商?我需要:我可以注入的供应商,或者我可以注入配置块的工厂/服务(?) – Cody 2013-07-31 20:11:22

+0

@Cody服务和工厂供应商。 '.config()'也可以像上面的例子一样处理依赖注入。 – 2013-09-24 18:10:06

21

为了完整起见,这里是注射服务的例子:

app.service('<service>', ['$http', function($http) { 
    this.foo = function() { ... } 
}]); 
+0

就在这时,我似乎无法将控制器注入服务 - 至少不是我自己定制的。我真的不应该在这里,但我不能看到一种方式来做一个模式指令的工作,它位于控制器之外,促使它弹出。 我创建了一个服务来尝试和做双向沟通思维服务可以注入两个控制器,但唉......什么是最好的方式来实现这一点。我想在这里提问,但由于某种原因它似乎被封锁,所以我只能对类似的事情发表评论。 – landed 2015-06-02 19:05:59

+0

你真的需要提出一个问题,最好用你的代码的[plnkr.co](http://plnkr.co/)。 – user1338062 2015-06-03 05:29:51

+0

我希望能够写出问题 - 看起来这个网站一旦被你阻止太多,就会永久封锁你。总之,我认为你不能注入控制器到东西(这听起来很愚蠢) 因此,我创建了服务和getter setter,然后观察需要订阅更新的控制器中的更改。这工作,并允许我控制器到控制器coms。 – landed 2015-06-03 10:22:33

5

虽然已经存在的答案是正确的,工作的,约翰·帕帕斯角风格指南有利于使用

过滤器:

app.filter('<filter', MyFilter); 
MyFilter.$inject = ['$http']; 
function MyFilter() { 
    return function(data) { 
    } 
} 
0123在 Y091$inject服务

指令:

app.directive('<directive>', MyDirective); 
MyDirective.$inject = ['$http']; 
function MyDirective() { 
    return { 
    ... 
    } 
} 

厂:

app.factory('<factory>', MyFactory); 
MyFactory.$inject = ['$http']; 
function MyFactory() { 
    var shinyNewServiceInstance; 
    return shinyNewServiceInstance; 
} 

服务:

app.service('<service>', MyService); 
MyService.$inject = ['$http']; 
function MyService() { 
    this.foo = foo; 
    function foo(){ 
    ... 
    } 
}