CODEWITHSUNDEEP
angularjsangularjs-directiveangularjs-scope
Shahzeb Khan
Shahzeb Khan

Reputation: 3642

AngularJs : Passing parameter to ng-click in directive

I have a directive in which i am adding an a button and an ng-click on the button. My code for directive is

AppDirectives.directive(
                'feed',
                function() {
                    return {
                        restrict : 'AE',
                        scope : {
                            feedMsg : '@feedText',
                            feedUser : '@feedUser',
                            feedTimestamp : '@feedTimestamp',
                            feedLike : '@feedLike',
                            feedDislike : '@feedDislike',
                            likeClick: '&',
                            dislikeClick :'&',
                            feedUid : '@feedUid'
                        },
                        template : '<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">'+
                                            '<h4 class="media-heading">{{feedUser}}</h4>'+
                                            '<h5>{{feedMsg}}</h5>'+
                                            '<p> <a ng-click="likeClick(feedLike)">Like</a> {{feedLike}} <a ng-click="dislikeClick(feedUid)">Dislike</a> {{feedLike}} {{ feedTimestamp | date:medium }} </p>'+
                                        '</div>'+
                                    '</div>',
                        replace : true,

                    };
                });

my html code is 

<feed feed-uid={{feed.uid}} feed-text={{feed.feedText}} feed-user={{feed.userUid}} feed-timestamp={{feed.time}} feed-like={{feed.like}} like-click="likeClick(uid)" dislike-click="dislikeClick(uid)" feed-dislike={{feed.dislike}}></feed>

and my contoller have 

$scope.dislikeClick = function(feedUid){
        console.debug("dislike"+feedUid);
    }

When i click on the dislike button, i get 'like undefined', where i am suppor to print the 'like uid_of_post'. can any one kindly tell me what is wrong with my code. As {{feedUid}} get the correct value inside the template.

Upvotes: 4

Views: 5424

Answers (1)

Jonathan Rowny
Jonathan Rowny

Reputation: 7588

from the documentation on $compile, which houses directive docs:

Often it's desirable to pass data from the isolated scope via an expression and to the parent scope, this can be done by passing a map of local variable names and values into the expression wrapper fn. For example, if the expression is increment(amount) then we can specify the amount value by calling the localFn as localFn({amount: 22}).

So in this case you'd be doing ng-click="dislikeClick({uid: feedUid})" and then from your html just do dislike-click="dislikeClick(uid)"

I'm answering to make this specific to your use case, but I think this is pretty much the same question as: AngularJS getting $event from a directive

Upvotes: 5

Related Questions