2013-12-24 6 views
10

У меня есть директива, и в ее функции связи я хочу получить доступ к методам из службы. Мой код директивыAngularjs: доступ к методам обслуживания из функции ссылки директивы

AppDirectives.directive('feed',['FeedService',function() { 
return { 
    restrict : 'AE', 
    scope : { 
     feedLike: '&', 
     feedItem : '=', 
     feedDislike :'&', 
     feedsArray :'=', 
    }, 
    templateUrl :'resources/views/templates/feedTemplate.html', 

    link : function(scope,element,feedService){ 
     console.debug("linking now"); 
     scope.likeComment = function(commentUid){ 
      console.debug("comment liked :"+commentUid); 
     }; 

     scope.addComment = function(referenceFeedUid){ 
      console.debug("commentText : "+scope.commentText); 
      var comment = { 
        user : "guest", 
        feedText : scope.commentText 
       }; 
      feedService.addComment(comment,referenceFeedUid).then(function(response){ 
       console.debug("response ; "+response); 
      // $scope.feeds.unshift(response); 
      }); 
     }; 

    }, 
    replace : true, 

}; 
}]); 

и мой код обслуживания

.factory('FeedService',function($http){ 

return { 
    postFeed : function (feed){ 
     /*$http.post('/feed/add',feed).success(function(response){ 
      console.debug("added "+response); 
     }).error(function(){ 
      console.debug("error adding feed"); 
     });*/ 

     return $http.post('/feed/add',feed).then(function(response){ 
      return response.data; 
     }); 

    }, 

    getFeeds : function(){ 
     return $http.get('/feed/get'); 
    }, 

    likeFeed : function(feedUid){ 
     return $http.get('/feed/'.concat(feedUid).concat('/like')).then(function(response){ 
      return response.data; 
     }); 
    }, 

    dislikeFeed : function(feedUid){ 
     return $http.get('/feed/'.concat(feedUid).concat('/dislike')).then(function(response){ 
      return response.data; 
     }); 
    }, 

    addComment : function (comment,referenceUid){ 
     var targetUrl = '/feed/'.concat(referenceUid).concat('/comment'); 

     return $http.post(targetUrl,comment).then(function(response){ 
      return response.data; 
     }); 

    }, 

}; 
}); 

, когда я называю добавить комментарий от ссылки директивы, я получаю следующее сообщение об ошибке на Firebug консоли.

TypeError: Object #<Object> has no method 'addComment' 
at Object.scope.addComment (http://localhost:8080/feed/resources/js/directives.js:53:21) 
at http://localhost:8080/feed/resources/js/lib/angular/angular.js:6193:19 
at http://localhost:8080/feed/resources/js/lib/angular/angular.js:12684:13 
at Object.Scope.$eval (http://localhost:8080/feed/resources/js/lib/angular/angular.js:7840:28) 
at Object.Scope.$apply (http://localhost:8080/feed/resources/js/lib/angular/angular.js:7920:23) 
at HTMLButtonElement.<anonymous> (http://localhost:8080/feed/resources/js/lib/angular/angular.js:12683:17) 
at http://localhost:8080/feed/resources/js/lib/angular/angular.js:1926:10 
at Array.forEach (native) 
at forEach (http://localhost:8080/feed/resources/js/lib/angular/angular.js:110:11) 
at HTMLButtonElement.eventHandler (http://localhost:8080/feed/resources/js/lib/angular/angular.js:1925:5) 

вот мой шаблон директива

<ul class="media-list"> 
<li class="media"> 
    <a class="pull-left" href="#"><img class="media-object" src="resources/images/holder.png" style="height:64px; width:64px;" alt="img"></a> 
    <div class="media-body"> 
      <span><h4 class="media-heading">{{feedItem.userUid}}</h4>{{ feedItem.time | date:medium }}</span> 
      <h5>{{feedItem.feedText}}</h5><h3></h3> 
     <p> <a ng-click="feedLike(feedItem.feedLike)">Like </a> {{feedItem.like}} 
      <a ng-click="feedDislike(feedItem.feeddisLike)">Dislike</a>         {{feedItem.dislike}} 
     </p> 

     <div ng-repeat = "comment in (feedsArray | filter:{referenceGroupId:feedItem.uid})"> 
      <div class="media"> 
       <a class="pull-left" href="#"><img class="media-object" src="resources/images/holder.png" style="height:64px; width:64px;" alt="img"></a> 
       <div class="media-body"> 
        <span><h4 class="media-heading">{{comment.userUid}}</h4>{{ comment.time | date:medium }}</span> 
        <h5>{{comment.feedText}}</h5><h3></h3> 
        <p> <a ng-click="likeComment(comment.uid)">Like </a> {{comment.like}} 
         <a ng-click="commentDislike(comment.uid)">Dislike</a>{{comment.dislike}} 
        </p> 
       </div> 
      </div><br/> 
     </div> 

     <div> 
      <input type="text" id="commentBox" ng-model="commentText"/> 
      <button class="btn btn-success" ng-click="addComment(feedUid)">Comment</button> 
     </div> 
    </div> 
</li> 

</ul> 

, что я пытаюсь сделать, это то, что я хочу, чтобы получить доступ к методу addCommennt из service. как я могу исправить это или есть какой-либо способ, которым я могу получить servicemethods изнутри directivelink функция.

Заранее спасибо. С уважением,

ответ

40

Вместо того, чтобы объявить службу в функции связи, декларируют его, когда вы определяете директиву:

Так вот:

AppDirectives.directive('feed',['FeedService',function(feedService) { 

Тогда feedService будет доступен для вызова внутри link функция. Параметры функции link конкретно определяются как scope, element, attrs, ctrl, поэтому там нет прямой инъекции зависимостей (AFAIK).

+3

Большое вам спасибо за быстрый ответ. Теперь он работает отлично. Еще раз спасибо. – Shahzeb

+1

спасибо за это! –

Смежные вопросы