在使用ng-repaet時未在角度自定義指令中調用的點擊處理程序

Question

我已經在angular中創建了一個指令，指令的模板使用ng-repeat，並且在模板內部有一個按鈕，該按鈕有一個指派給它的點擊處理程序使用ng-click。

.directive('webEvent',function(){ 
return{ 
    restrict:'E', 
    replace: true, 
    scope: { 
     events: "=" 
    }, 
    template:"<div class='row' ng-repeat='event in events'>"+ 
       "<div class='col-md-8'>"+ 
        "<p class='evTitle'>{{event.eventName}} @ {{event.eventPlace}} on {{event.eventDate}}</p>"+ 
        "<p class='evLength'>You have {{event.eventLength}} events scheduled on this date</p>"+ 
       "</div>"+ 
       "<div class='col-md-4'><button type='button' class='btn btn-success pull-right' ng-show='event.expressIntrest' ng-click='expressIntrestClick($index)'>Express Intrest</button></div>"+ 
       "</div>", 
    link:function(scope, elem, attrs){ 

     scope.expressIntrestClick=function(index){ 
     console.log("hello"); 
     } 


     } 
    } 

}）;

我面臨的問題是按鈕的點擊處理程序沒有被調用。

當我創建一個沒有ng-repeat的類似指令時，點擊處理程序就會被調用。我爲這個指令都創建了plunks。 我應該怎麼做才能在使用ng-repeat時調用點擊處理程序？

directive without ng-repeat

directive with ng-repeat

Answer 1

的問題是，所述模板應包含一個根元件。

當您在模板中使用ng-repeat時，事實證明您不需要根元素。

請參閱固定plunker。

指令的固定模板：

template: "<div><div class='row' ng-repeat='event in events'>" + 
    "<div class='col-md-8'>" + 
    "<p class='evTitle'>{{event.eventName}} @ {{event.eventPlace}} on {{event.eventDate}}</p>" + 
    "<p class='evLength'>You have {{event.eventLength}} events scheduled on this date</p>" + 
    "</div>" + 
    "<div class='col-md-4'><button type='button' class='btn btn-success pull-right' ng-show='event.expressIntrest' ng-click='goit(event)'>Express Intrest</button></div>" + 
    "</div></div>",