2013-03-17 129 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(){ 
    ... 
    } 
}