javascript - ng-click 不适用于动态 DOM AngularJS？

Question

我有一个这样的 Controller :

@VariantModalCtrl = ($scope) ->
  $scope.upload_variant_image = ->
    alert("test")

当我尝试使用 ng-click 调用 upload_variant_image 函数时，它仅在绑定(bind)到静态 DOM 时有效(当 DOM 加载时)，我有一个这样的链接:

<%= link_to "test", "" , "ng-click" => "upload_variant_image()" %>

但是这个元素是在 DOM 加载后动态添加的，所以 ng-click 不起作用。

更新刚刚使用 $compile 函数找到了我的部分答案: AngularJS + JQuery : How to get dynamic content working in angularjs

但是当我在 Rails 中像这样更新 DOM 时它不起作用:

$(".modal-body").html($compile("<%= j render("/variants/form", :variant => @variant) %>")(scope));

Answer 1

我会警告您，如果您通过 Angular 外部方式操纵 DOM，您可能没有完全接受 Angular 哲学。使用 AngularJS 动态添加链接就像其他任何东西一样简单，并且可能比让外部库发挥作用更容易和更惯用。这是一个基于您的问题的简单示例:

<ul>
  <li ng-repeat="item in items">
    <a ng-click="upload_variant_image()">{{item.name}}</a>
  </li>
</ul>

您需要做的就是适本地连接示波器数据，这将始终“正常工作”。

就是说，如果您正在操作 DOM，则可以通过使用 $compile service 导致 AngularJS 绑定(bind)发生(例如，根据需要进行 ng-click)。 .不过，请考虑上述更好的选择。 :)