AngularJS директива и нажмите

Question

AngularJS директива и нажмите

0

В функции контроллера я вызываю REST API, который возвращает мне массив. Я использую ng-repeat, чтобы отобразить его в таблице HTML. Я также использую настраиваемую директиву следующим образом:

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

Код моей директивы следующий:

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

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

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)

Чтобы отладить мою директиву, я заменил "{{id}} на число, а затем ошибка исчезла, но когда я нажимаю на имя плеера, ничего не происходит, функция" utilities.showPlayerInfo "не вызывается. Это функция, объявленная в пользовательской службе с угловым выражением. Я также добавил следующую строку в своем контроллере, чтобы сделать ее доступной:

$scope.utilities = utilities;

Но похоже, что директива не компилируется, или я не знаю, что...

Первоначальная потребность в том, что я получаю данные и большую часть времени, информация игроков прикрепляется к ним. Я хочу показать их как ссылку, которая показывает модальный диалог, когда я нажимаю на них.

ssougnez 27 сен. 2015, в 15:42

Источник

Теги:

angularjs

angularjs-directive

angularjs-ng-click

1 ответ

Ещё вопросы

Pankaj Parkar · Accepted Answer · 2015-09-27T12-22-00.000Z

Шаблон директивы ng-click не должен содержать интерполяцию

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

Кроме того, чтобы заставить работать с ng-click, вы должны сделать эту ссылку на службу внутри области директивы, поскольку вы создали изолированную область для элемента директивы. Добавить функцию связи и назначить do $scope.utilities = utilities;

директива

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

Вы действительно правы, глупый я ... Это решает первую проблему, но все же, когда я нажимаю на ссылку, функция, кажется, не вызывается.
@ssougnez обновлял ответ ... посмотрите на редактирование.
Да уж ! Работает как шарм ... Большое спасибо!