【问题标题】:ng-click not working in dynamically created contentng-click 在动态创建的内容中不起作用
【发布时间】:2015-08-08 17:39:33
【问题描述】:

我在 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),我该如何解决这个问题,因为它是控制器内部的函数,而不是指令?

【问题讨论】:

    标签: javascript angularjs angularjs-scope


    【解决方案1】:

    您需要在此处添加 $compile 服务,它将诸如 ng-click 之类的角度指令绑定到您的控制器范围。类似于:

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

    然后将其附加到 HTML:

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

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

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

    【讨论】:

    • 谢谢伙计。绑定不会那么好,因为它需要唯一的类/ID。 $compile 服务如何工作?
    • var divTemplate = '..你的 div 模板'; var temp = $compile(divTemplate)($scope);然后将其附加到 HTML" angular.element(document.getElementById('foo')).append(temp);
    • 是否可以在 Service 中添加 $compile 并显示错误,例如“SCRIPT5007: Object expected”
    • 你能解释一下吗?
    • 如果我不想将此代码附加到我的 html 中怎么办,因为我在 DataTable 中使用它,所以我无法将它添加到 html.... 我现在该怎么办?