我可以在指令中注入服務嗎？

222

我試圖注入一個服務爲一體的指令，象下面這樣：我可以在指令中注入服務嗎？

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。有人可以看看代碼並告訴我，如果我做錯了什麼？

來源

2013-03-22 Exception

367

你可以在指令中的注入，它看起來就像它在其他地方。

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

來源

2013-03-22 14:59:27 grendian

+12

我認爲這是一個更好的解決方案，因爲它即使在縮小代碼之後也可以工作。 – czerasz 2013-07-11 22:59:38

我必須在return {}之前添加'_myData = myData'，然後在鏈接函數內將對象引用爲_myData。 – Jelling 2013-11-28 15:58:34

謝謝@Jelling。我必須做同樣的事情。我想知道有沒有人能告訴我們爲什麼......？因爲關閉，所以 – sfletche 2014-03-06 17:53:08

將您的指令定義從app.module更改爲app.directive。除此之外，一切看起來都很好。順便說一句，很少做，你必須注入服務爲一體的指令。如果您要將一項服務（通常是數據源或模型）注入您的指令（這是某種視圖的一部分），那麼您正在創建視圖和模型之間的直接耦合。您需要使用控制器將它們連接在一起。

它的工作的罰款。我不確定你在做什麼是錯的。這是它的一大塊工作。

http://plnkr.co/edit/M8omDEjvPvBtrBHM84Am

來源

2013-03-22 11:47:29 ganaraj

你能提供一個例子，請 – Exception 2013-03-22 11:48:21

拋出你可以把你的代碼在一個小提琴？我可以看看，看看你的代碼爲什麼不起作用，並可能幫助你修復它。 – ganaraj 2013-03-22 11:49:44

@Exception添加了一個顯示代碼正常工作的正常工作。 – ganaraj 2013-03-22 12:19:14

您還可以使用$ 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

我可以在指令中注入服務嗎？

回答

相關問題