使用ng-repaet时未在angular自定义指令中调用click处理程序

debugcn 发表于 Dev

卑鄙的人

我已经在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的类似指令时，将调用点击处理程序。我为这两个指令创建了代码块。我应该怎么做才能在使用ng-repeat时调用单击处理程序？

没有ng-repeat的指令

带有ng-repeat的指令

斯捷潘·卡西亚年科（Stepan Kasyanenko）

问题在于模板应包含一个根元素。

当您ng-repeat在模板中使用时，结果表明您没有生根元素。

见固定塞子。

固定指令模板：

 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>",

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。