在ng里,所有的指令在按照意愿正常工作之前的都需要编译一下,包含angularJS的自定义指令。
ng模板里的所有指令都会在angularJS加载完毕之后编译一下,所以那些自定义指令和事件才能工作。
但如果是新增DOM的里如果包含自定义指令,那么就需要在angularJS的编译器下重新跑一下。
编译指令有两种办法
1,使用$compile()
2,使用ng-repeat指令
NOTE,自定义指令的模板必须包含在一个root element根节点里,如果是两个相邻的兄弟节点会报错。
return{ ... template:'<div class="child"></div><div class="child"></div>', //会报错,没有根节点 ... }
所以正确的模板是这样的
return{ ... template:'<div class="parent">'+ +'<div class="child"></div><div class="child"></div>' +'</div>', //有了父节点包围着就好了。。。 ... }
但是我模板又出现了一个问题 Maximum call stack size exceeded
<div class="btns saveMode"> <button class="btn btn-primary btn-sm btn-outline add-btn"><i class="fa fa-plus"></i></button> <button class="btn btn-warning btn-sm btn-outline edit-btn"><i class="fa fa-edit"></i></button> <button class="btn btn-danger btn-sm btn-outline delete-btn"><i class="fa fa-remove"></i></button> </div> <div class="btns editMode"> <button class="btn btn-sm btn-primary btn-outline save-btn"><i class="fa fa-save"></i></button> <button class="btn btn-sm btn-warning btn-outline cancel-btn"><i class="fa fa-ban"></i></button> </div>
怎么调整都不行,把模板写到单独的html文件里,使用templateUrl引入也同样会出问题
后来只能将模板加入到edit-btn标签里才没有问题;