如何从AngularJS中的指令调用服务

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

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

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