正常情况(即非动态插入 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
指令,举个例子:
<!-- 在要动态插入的地方…… --> <div class="form-control" ng-repeat="fragment in fragments"> <button ng-click="submitForm()">{{fragment.text}}</button> </div>
这里的 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 模版。