Question

我目前有一个指令，只要发生点击事件就会调用该指令。这有助于我更改添加到用户喜欢列表的图标。

查看：

  <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('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

  });


}
       };});

当点击事件发生时，我想从控制器调用此指令中的服务。以下是我想要致电的服务示例

$scope.addFavorite = function(objectId){
PlaceService.addFavorite(objectId,currentUser)

Answer 1

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;

       })


     };
 ]})

Answer 2

Angular不会在链接函数中注入依赖项，你必须在指令本身的函数声明中使用它：

angular.directive('myDirective', function(myService) {
    return {
        // ...
        link: function(...) {
            myService.addFavorite(objectId, currentUser);
        }
    }
});

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

2 个答案: