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

ng-repeat里创建的自定义指令的更多相关文章

  1. 在angular7中创建组件/自定义指令/管道

    在angular7中创建组件/自定义指令/管道 组件 使用命令创建组件 创建组件的命令:ng generate component 组件名 生成的组件组成: 组件名.html .组件名.ts.组件名. ...

  2. ng之自定义指令

    最近开始研究并使用angular,今天就来简单讲讲对于ng中自定义指令的一下使用心得吧! 相信用过ng的人都对ng中的指令有所了解,指令,我将其理解为AngularJS操作HTML element的一 ...

  3. angular自定义指令 repeat 循环结束事件;limitTo限制循环长度、限定开始位置

    1.获取repeat循环结束: 自定义指令: .directive('repeatFinish', function () { return { link: function (scope, elem ...

  4. 在vue中创建自定义指令

    原文:https://dev.to/ratracegrad/creating-custom-directives-in-vue-58hh 翻译:心上有杨 指令是带有 v- 前缀的特殊属性.指令的作用是 ...

  5. angular自定义指令命名的那个坑

    Directive 先从定义一个简单的指令开始. 定义一个指令本质上是在HTML中通过元素.属性.类或注释来添加功能.AngularJS的内置指令都是以ng开头,如果想自定义指令,建议自定义一个前缀代 ...

  6. Vue自定义指令使用场景

    当你第一次接触vue的时候,一定会使用到其中的几个指令,比如:v-if.v-for.v-bind...这些都是vue为我们写好的,用起来相当的爽.如果有些场景不满足,需要我们自己去自定义,那要怎么办呢 ...

  7. vue 自定义指令的魅力

    [第1103期]vue 自定义指令的魅力 点点 前端早读课 2017-11-08 前言 很多事情不能做过多的计划,因为计划赶不上变化.今日早读文章由富途@点点翻译分享. 正文从这开始- 在你初次接触一 ...

  8. Vue.js 第2章 钩子函数&自定义指令&过滤器&计算属性&侦听器

    目标 钩子函数 自定义指令 自定义过滤器 计算属性 监听属性 局部自定义指令 为什么需要自定义指令 为了复用,为了代码的灵活 指令的分类:全局指令,局部指令 在vm外面创建的指令 通过Vue.dire ...

  9. AngularJS -- 指令(创建自定义指令)

    点击查看AngularJS系列目录 转载请注明出处:http://www.cnblogs.com/leosx/   什么是指令 注:本指南是针对已经熟悉AngularJS基础知识的开发人员.如果你才刚 ...

随机推荐

  1. sqlite3的图片的(二进制数据)存取操作

    sqlite3的图片的(二进制数据)存取操作   前言 上篇介绍了sqlite3的一些常用插入操作方法和注意事项,在实际项目中遇到了图片缓存的问题,由于服务器不是很稳定,且受到外界环境的干扰(例如断电 ...

  2. 【转】fatal error C1900: “P1”(第“20081201”版)和“P2”(第“20080116”版)之间 Il 不匹配

    转自:这里(然而这里并没有写原出处) 背景:今天傻逼逼地想用vs2010来编译一个vs2013的项目,其中这个项目用到了一个库(应该是用2013编译的) 在我浅薄的认知中,以为只是13支持的特性更多, ...

  3. 红豆电信JS

    http://www.hodo170.com/login.jsp 先定义window,再定义RSAUtils=window.RSAUtils || a.RSAUtils; /* * RSA, a su ...

  4. IO流-----写到输出流

    输出流:---链接:http://blog.csdn.net/du_minchao/article/details/49045421 /** * 方法名:writeStream * 方法描述:写到输出 ...

  5. weui dialog

    切记:weui dialog 的样式是在weui.css,而不是在weui.min.css HTML: <!DOCTYPE html> <html> <head> ...

  6. 开源遥感平台opticks插件开发指南

    Opticks是一款开源的遥感数据处理平台,与其同类开源软件OSSIM一样,支持种类丰富的数据文件格式,但其最大特点为设计精巧的插件开发模式,在设计技巧上,系统提供了良好的封装特性,即使插件开发者对框 ...

  7. Gc.Db之循序渐进

    距离上次写Gc.Db框架已经有一段时间了,最近默默对框架代码已经做了不少优化和功能,且已经提交至nuget,大家如果想使用此框架,可以通过nuget搜索:Gc.Db进行下载和安装包. 本篇文章主要是介 ...

  8. Python3 Socket网络编程

    Socket又称"套接字",应用程序通常通过"套接字"向网络发出请求或者应答网络请求,使主机间或者一台计算机上的进程间可以通讯. socket起源于UNIX,在 ...

  9. Android基础总结(八)

    服务两种启动方式(掌握) startService 开始服务,会使进程变成为服务进程 启动服务的activity和服务不再有一毛钱关系 bindService 绑定服务不会使进程变成服务进程 绑定服务 ...

  10. List Map Set 的用法和区别

    参考 http://blog.csdn.net/vstar283551454/article/details/8682655