Question

在控制器函数中，我正在调用一个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”函数没有被调用。这是一个在Angular自定义服务中声明的函数。我还在控制器中添加了以下行以使其可用：

$scope.utilities = utilities;

但看起来这个指令没有编译，或者我不知道是什么......

最初的需求是我收到数据，大多数时候，玩家信息都附在他们身上。我想将它们显示为当我点击它们时显示模态对话框的链接。

Answer 1

你的指令模板ng-click不应该有插值

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

此外，为了使ng-click方法有效，您应该在为指令元素创建隔离范围时在指令范围内提供该服务引用。添加链接功能并指定执行$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; 
        }
    }
});

AngularJS指令和ng-click

1 个答案: