AngularJS指令和ng-click

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}}」一個數字，然後錯誤消失，但是當我點擊玩家的名字，沒有任何反應，「utili tie.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; 
     } 
    } 
});