web-dev-qa-db-ja.com

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;
        });

    },

};
});

ディレクティブのリンクからaddcommentを呼び出すと、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にアクセスする方法はありますか。

前もって感謝します。よろしく、

angularjsangularjs-directiveangularjs-scope
12
Shahzeb Khan

Link関数でサービスを宣言する代わりに、ディレクティブを定義するときにサービスを宣言します。

だからここに：

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

その後、feedServiceはlink関数内で呼び出すことができます。 link関数パラメーターは特にscope, element, attrs, ctrlとして定義されているため、そこで直接依存性注入が発生することはありません（AFAIK）。

42
Davin Tryon