javascript - ng-click 不适用于动态创建的内容

Question

我在 Angular 中有这个功能，我在其中添加了一个带有 ng-click 的新幻灯片。

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 not working from dynamically generated HTML)，我该如何解决这个问题，因为它是 Controller 内部的一个函数，而不是指令？

Answer 1

您需要在此处添加 $compile 服务，它将像 ng-click 这样的 Angular Directive(指令)绑定(bind)到您的 Controller 范围。类似于:

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

然后将其附加到 HTML:

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

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

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