AngularJS directive and ng-click

Question

In a controller function, I'm calling a REST API that returns me an array. I'm using a ng-repeat in order to display it in a HTML table. I'm also using a custom directive like this:

<player id="transaction.id_player_to" name="transaction.player_to_name"></player>

The code of my directive is the following one :

etl.directive('player', function()
{
    return {
        restrict: 'E',
        replace: true,
        scope: {
            id: '=',
            name: '='
        },
        template: function()
        {
            return '<span class="bold"><a data-ng-click="utilities.showPlayerInfo({{ id }})" href="#">{{ name }}</a></span>';
        }
    }
});

WHen I display my page, I can see the name of the player but I also get the following error:

Error: [$parse:syntax] http://errors.angularjs.org/1.4.6/$parse/syntax?p0=%7B&p1=invalid%20key&p2=27&p3=utilities.showPlayerInfo(%7B%7BNaNd%20%7D%7D)&p4=%7B%id%20%7D%7D)

In order to debug my directive, I replaced "{{ id }}" by a number, and then the error disappears but when I click on the player's name, nothing happens, the "utilities.showPlayerInfo" function is not called. This one is a function declared in an Angular custom service. I also added the following line in my controller to make it available:

$scope.utilities = utilities;

But it looks like the directive is not compiled, or I don't know what...

The initial need is that I receive data and most of the time, players information are attached to them. I want to display them as the link that shows a modal dialog when I click on them.

Pankaj Parkar · Accepted Answer · 2015-09-27 13:47:16Z

3

You directive template ng-click shouldn't have interpolation in it

    template: function()
    {
        return '<span class="bold">'+
                  '<a data-ng-click="utilities.showPlayerInfo(id)" href="#">{{ name }}</a>'+
               '</span>'+
    }

Additionally in order to make ng-click method working, you should make available that service reference inside directive scope as you created isolated scope for directive element. Add link function and assign do $scope.utilities = utilities;

Directive

etl.directive('player', function(utilities) {
    return {
        restrict: 'E',
        replace: true,
        scope: {
            id: '=',
            name: '='
        },
        template: function() {
            return '<span class="bold">' +
                '<a data-ng-click="utilities.showPlayerInfo(id)" href="#">{{ name }}</a>' +
                '</span>' +
        }
        link: function(scope) {
            //to make click workable, adding service reference to scope.
            $scope.utilities = utilities; 
        }
    }
});

edited Sep 27, 2015 at 13:47

answered Sep 27, 2015 at 13:38

Pankaj Parkar

136k23 gold badges241 silver badges307 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

ssougnez Over a year ago

You're indeed right, silly me... This fixes the first issue but still, when I click on the link, the function does not seem to be called.

Pankaj Parkar Over a year ago

@ssougnez was updating the answer...look at the edit.

ssougnez Over a year ago

Yeah ! Works like a charm... Thanks a lot !

Pankaj Parkar Over a year ago

@ssougnez Glad to help you..Thanks :)

Collectives™ on Stack Overflow

AngularJS directive and ng-click

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related