我试图将服务注入如下指令:
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。有人能检查一下代码并告诉我是否我做错了什么吗?
将你的指令定义从app.module更改为app.directive。除此之外，一切看起来都很好。 顺便说一句，你很少需要在指令中注入服务。如果你将一个服务(通常是一个数据源或模型)注入到你的指令(它是视图的一部分)中，你就创建了视图和模型之间的直接耦合。您需要通过使用控制器将它们连接在一起来分离它们。
它确实工作得很好。我不知道你做错了什么。这是它工作的敲击声。
http://plnkr.co/edit/M8omDEjvPvBtrBHM84Am
你可以在指令上进行注入，它看起来就像在其他地方一样。
app.directive('changeIt', ['myData', function(myData){
return {
restrict: 'C',
link: function (scope, element, attrs) {
scope.name = myData.name;
}
}
}]);
您还可以使用$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端点交互的元素时非常有用。
如果你使用指令作为一个单独的模块，需要导入服务如下
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;
}
}
}]);
