我试图将服务注入如下指令:
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('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;
}
}
}]);
如果你使用指令作为一个单独的模块,需要导入服务如下
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;
}
}
}]);
您还可以使用$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端点交互的元素时非常有用。