ng-repeat里创建的自定义指令

在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标签里才没有问题；