I currently have a directive that is called whenever a click event happens. This helps me change the icon for adding to user's favorite list.
我目前有一个指令,只要发生点击事件就会调用它。这有助于我更改添加到用户喜欢列表的图标。
View:
<div class="col col-33">
<i class="icon ion-ios-heart-outline" favorite="place[0].objectId" on-icon="ion-ios-heart-outline" off-icon="ion-ios-heart" icon-switcher /></i>{{place[0].likes}}
</div>
Directive:
.directive('iconSwitcher', function() {
return {
restrict : 'A',
scope: {
favorite: '='
},
link : function(scope, elem, attrs, PlaceService, ) {
var currentState = true;
elem.on('click', function() {
console.log('objectId',scope.favorite);
if(currentState === true) {
angular.element(elem).removeClass(attrs.onIcon);
angular.element(elem).addClass(attrs.offIcon);
} else {
angular.element(elem).removeClass(attrs.offIcon);
angular.element(elem).addClass(attrs.onIcon);
}
currentState = !currentState
});
}
};});
I will like to call a service from this directive when the click event happens like i do from a controller. Here is a sample of the service i want to call
当click事件像我从控制器那样发生时,我想从这个指令调用一个服务。这是我想要呼叫的服务的示例
$scope.addFavorite = function(objectId){
PlaceService.addFavorite(objectId,currentUser)
2 个解决方案
#1
1
Angular will not inject the service into the link function.Inject your service in the directive and use like in the controller.
Angular不会将服务注入到链接函数中。在指令中注入您的服务并在控制器中使用。
.directive('iconSwitcher', ['PlaceService', function(PlaceService) {
// Use PlaceService here as a simple service
return {
restrict : 'A',
scope: {
favorite: '='
},
link : function(scope, elem, attrs) {
var currentState = true;
elem.on('click', function() {
console.log('objectId',scope.favorite);
if(currentState === true) {
angular.element(elem).removeClass(attrs.onIcon);
angular.element(elem).addClass(attrs.offIcon);
} else {
angular.element(elem).removeClass(attrs.offIcon);
angular.element(elem).addClass(attrs.onIcon);
}
currentState = !currentState;
})
};
]})
#2
0
Angular don't inject dependencies in the link function, you have to take it in the function declaration of the directive itself :
Angular不会在链接函数中注入依赖项,您必须在指令本身的函数声明中使用它:
angular.directive('myDirective', function(myService) {
return {
// ...
link: function(...) {
myService.addFavorite(objectId, currentUser);
}
}
});
#1
1
Angular will not inject the service into the link function.Inject your service in the directive and use like in the controller.
Angular不会将服务注入到链接函数中。在指令中注入您的服务并在控制器中使用。
.directive('iconSwitcher', ['PlaceService', function(PlaceService) {
// Use PlaceService here as a simple service
return {
restrict : 'A',
scope: {
favorite: '='
},
link : function(scope, elem, attrs) {
var currentState = true;
elem.on('click', function() {
console.log('objectId',scope.favorite);
if(currentState === true) {
angular.element(elem).removeClass(attrs.onIcon);
angular.element(elem).addClass(attrs.offIcon);
} else {
angular.element(elem).removeClass(attrs.offIcon);
angular.element(elem).addClass(attrs.onIcon);
}
currentState = !currentState;
})
};
]})
#2
0
Angular don't inject dependencies in the link function, you have to take it in the function declaration of the directive itself :
Angular不会在链接函数中注入依赖项,您必须在指令本身的函数声明中使用它:
angular.directive('myDirective', function(myService) {
return {
// ...
link: function(...) {
myService.addFavorite(objectId, currentUser);
}
}
});