ng-click 不适用于动态创建的内容 [英] ng-click not working in dynamically created content

问题描述

我在 Angular 中有这个功能，我可以在其中添加一个新幻灯片，并在其中单击鼠标.

I have this function in Angular where I add a new slide with a ng-click in it.

var addSlide = function($scope, slideIndex, $event) {
  slideIndex++;
  var slider = angular.element('.slick-slider');
  var currentSlide = slider.slick('slickCurrentSlide');
  slider.slick('slickAdd', '<div class="slide" ng-click="addPhoto(); $event.stopPropagation();"><input type="file" class="camera-trigger" accept="image/*"><img class="photo-img" src="" /></div>');
};

不幸的是动态创建的 ng-click 事件不起作用 (ng-click 不能从动态生成的 HTML 中工作)，我该如何解决这个问题，因为它是控制器内部的一个函数，而不是一个指令?

Unfortunately dynamically created ng-click events don't work (ng-click not working from dynamically generated HTML), how can I fix this in my case, since it's a function inside a controller, instead of a directive?

推荐答案

你需要在这里添加 $compile 服务，它将把 ng-click 等角度指令绑定到你的控制器范围.类似:

you need to add $compile service here, that will bind the angular directives like ng-click to your controller scope.Something like:

var divTemplate = '..your div template';
var temp = $compile(divTemplate)($scope); 

然后将其附加到 HTML 中:

Then append it to the HTML:

angular.element(document.getElementById('foo')).append(temp);

您还可以将事件绑定到 div，如下所示:

You can also bind the event to the div as following:

 var div = angular.element("divID");
 div.bind('click', $scope.addPhoto());

这篇关于ng-click 不适用于动态创建的内容的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！