title: Angularjs : accessing service methods from directive's link function
body: <p>i have a directive, and in its link function i want to access methods from a service. My code for directive is</p>
  
  <pre><code>AppDirectives.directive('feed',['FeedService',function() {
  return {
      restrict : 'AE',
      scope : {
          feedLike: '&amp;',
          feedItem : '=',
          feedDislike :'&amp;',
          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,
  
  };
  }]);
  </code></pre>
  
  <p>and my service code is </p>
  
  <pre><code>.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;
          });
  
      },
  
  };
  });
  </code></pre>
  
  <p>when i call the add comment from directive's link, i am getting following error on firebug console.</p>
  
  <pre><code>TypeError: Object #&lt;Object&gt; 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.&lt;anonymous&gt; (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) 
  </code></pre>
  
  <p>here is my directive template</p>
  
  <pre><code> &lt;ul class="media-list"&gt;
   &lt;li class="media"&gt;
      &lt;a class="pull-left" href="#"&gt;&lt;img class="media-object" src="resources/images/holder.png" style="height:64px; width:64px;" alt="img"&gt;&lt;/a&gt;
      &lt;div class="media-body"&gt;
             &lt;span&gt;&lt;h4 class="media-heading"&gt;{{feedItem.userUid}}&lt;/h4&gt;{{ feedItem.time | date:medium }}&lt;/span&gt;
            &lt;h5&gt;{{feedItem.feedText}}&lt;/h5&gt;&lt;h3&gt;&lt;/h3&gt;
          &lt;p&gt; &lt;a ng-click="feedLike(feedItem.feedLike)"&gt;Like &lt;/a&gt; {{feedItem.like}} 
              &lt;a ng-click="feedDislike(feedItem.feeddisLike)"&gt;Dislike&lt;/a&gt;                                   {{feedItem.dislike}} 
          &lt;/p&gt;
  
           &lt;div ng-repeat = "comment in (feedsArray | filter:{referenceGroupId:feedItem.uid})"&gt;
              &lt;div class="media"&gt;
                  &lt;a class="pull-left" href="#"&gt;&lt;img class="media-object" src="resources/images/holder.png" style="height:64px; width:64px;" alt="img"&gt;&lt;/a&gt;
                  &lt;div class="media-body"&gt;
                      &lt;span&gt;&lt;h4 class="media-heading"&gt;{{comment.userUid}}&lt;/h4&gt;{{ comment.time | date:medium }}&lt;/span&gt;
                      &lt;h5&gt;{{comment.feedText}}&lt;/h5&gt;&lt;h3&gt;&lt;/h3&gt;
                      &lt;p&gt; &lt;a ng-click="likeComment(comment.uid)"&gt;Like &lt;/a&gt; {{comment.like}} 
                          &lt;a ng-click="commentDislike(comment.uid)"&gt;Dislike&lt;/a&gt;{{comment.dislike}} 
                      &lt;/p&gt;
                  &lt;/div&gt;
              &lt;/div&gt;&lt;br/&gt;
          &lt;/div&gt;
  
          &lt;div&gt;
              &lt;input type="text" id="commentBox" ng-model="commentText"/&gt;
              &lt;button class="btn  btn-success" ng-click="addComment(feedUid)"&gt;Comment&lt;/button&gt;
          &lt;/div&gt; 
      &lt;/div&gt;
  &lt;/li&gt;
  
  &lt;/ul&gt;
  </code></pre>
  
  <p>what i am trying to do is that i want to access the <code>addCommennt</code> method from <code>service</code>. how can i fix it or is there any way that i can acess the <code>service</code> <code>methods</code> from inside the <code>directive</code> <code>link</code> function.</p>
  
  <p>Thanks in advance.
  regards,</p>