动态创建的元素不触发单击事件

Question

$scope.addNew = function(){    
    $('.thumb-img-gallary').append("<li><span class='img-del' ng-click='delThumbImgGallaryPhoto($event)'>X</span><img class='thumb-img' src='data:image/jpeg;base64,"+imageData+"'/></li>");    
}

我正在调用此函数来动态添加元素.但后来delThumbImgGallaryPhoto()没有被召唤.

Answer 1

你不能只用ng-click或任何其他指令追加一个元素,并期望它能够工作.它必须由angular编译.

关于角度文档的编译的explenation :

对于AngularJS,"编译"意味着将指令附加到HTML以使其具有交互性

竞争发生在以下两种情况之一:

• 当Angular引导您的应用程序时,HTML编译器会针对DOM元素遍历DOM匹配指令

• 当您在角度上下文中调用$ compile服务时

所以你需要做的是,首先编译它(记住在你的控制器中注入$ compile服务),然后追加它:

$scope.addNew = function(){    
    var elem = $compile("<li><span class='img-del' ng-click='delThumbImgGallaryPhoto($event)'>X</span><img class='thumb-img' src='data:image/jpeg;base64,"+imageData+"'/></li>")($scope);
    $('.thumb-img-gallary').append(elem);    
}

顺便说一句,记住它可以在控制器中完成任何DOM操作.angular有指令.