angular.js - AngularJS如何给在JS中添加的DOM元素绑定事件

Question

  var tpl = '<button ng-click="submitForm()" submit-form>' +
              'Submit'+
            '</button>'

  // 这两个方法都不work
  $scope.submitForm = function () {}
  angular.module('xxx', []).directive('submitForm')

感谢回答！

Answer 1

没时间写例子佐证了，就简单说一下我的理解，希望对你有用。

正常情况（即非动态插入 DOM 对象）下，ng-click 这样的指令之所以有效（即点击之后能调用注册在可见作用域里的方法），是因为 angular 在 compiling phase（编译阶段）将宿主 DOM 对象（即加入了 ng-click 指令的 DOM 对象）绑定在当前作用域内了。

换言之，当前作用域知道有这个绑定了 ng-click 的 DOM 对象存在，所以 ng-click 才会起作用。

而在你的例子里，HTML 片段是在 compiling phase 后动态插入到 DOM 树中的，即便你写了 ng-click，当前的作用域也不知道这个指令的存在，所以才会无效。

因此，当你动态插入 HTML 片段的时候，要手动调用 $compile 服务并将这个 DOM 对象绑定给当前的作用域（或其他可见作用域，这要看你的应用逻辑了），具体方法如下：

// 在某一个 controller 中，假设用 jQuery 动态插入一个 HTML 片段……
$('selector').html(
  $compile(
    '<button ng-click="submitForm()">' + 'Submit' + '</button>'
  )(scope)
);

注意要先注入 $compile 服务。

另外，这种方式明显太“恶心”，还有一个更好的办法（但是大量动态插入会有性能损耗）就是利用 ng-repeat 指令，举个例子：

<!-- 在要动态插入的地方…… -->
<p class="form-control" ng-repeat="fragment in fragments">
  <button ng-click="submitForm()">{{fragment.text}}</button>
</p>

这里的 fragments 就是一个空数组（初始状态），所以一开始这里 ng-repeat 不会有任何作用，然后你写一个方法来触发动态插入的动作，把一个类似 { text: 'Submit' } 这样的对象 push 到这个空数组中，ng-repeat 就会“帮”你把 DOM 对象插入了，并且 ng-repeat 本身就会重新 compile 内涵的 DOM 对象，因此 ng-click 会如你所愿的生效。

以上两个例子里我都去掉了你的 submit-form 指令，因为没有必要。如果你要把它写成指令，那么你应该学习 ng-repeat 的方法，简单的说就是监视一个 expression（比如 item in items），当 items 变化的时候，重新 compile 内涵的 HTML 模版。具体的代码你可以去找，angular 是开源的。