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标签里才没有问题;
ng-repeat里创建的自定义指令的更多相关文章
- 在angular7中创建组件/自定义指令/管道
在angular7中创建组件/自定义指令/管道 组件 使用命令创建组件 创建组件的命令:ng generate component 组件名 生成的组件组成: 组件名.html .组件名.ts.组件名. ...
- ng之自定义指令
最近开始研究并使用angular,今天就来简单讲讲对于ng中自定义指令的一下使用心得吧! 相信用过ng的人都对ng中的指令有所了解,指令,我将其理解为AngularJS操作HTML element的一 ...
- angular自定义指令 repeat 循环结束事件;limitTo限制循环长度、限定开始位置
1.获取repeat循环结束: 自定义指令: .directive('repeatFinish', function () { return { link: function (scope, elem ...
- 在vue中创建自定义指令
原文:https://dev.to/ratracegrad/creating-custom-directives-in-vue-58hh 翻译:心上有杨 指令是带有 v- 前缀的特殊属性.指令的作用是 ...
- angular自定义指令命名的那个坑
Directive 先从定义一个简单的指令开始. 定义一个指令本质上是在HTML中通过元素.属性.类或注释来添加功能.AngularJS的内置指令都是以ng开头,如果想自定义指令,建议自定义一个前缀代 ...
- Vue自定义指令使用场景
当你第一次接触vue的时候,一定会使用到其中的几个指令,比如:v-if.v-for.v-bind...这些都是vue为我们写好的,用起来相当的爽.如果有些场景不满足,需要我们自己去自定义,那要怎么办呢 ...
- vue 自定义指令的魅力
[第1103期]vue 自定义指令的魅力 点点 前端早读课 2017-11-08 前言 很多事情不能做过多的计划,因为计划赶不上变化.今日早读文章由富途@点点翻译分享. 正文从这开始- 在你初次接触一 ...
- Vue.js 第2章 钩子函数&自定义指令&过滤器&计算属性&侦听器
目标 钩子函数 自定义指令 自定义过滤器 计算属性 监听属性 局部自定义指令 为什么需要自定义指令 为了复用,为了代码的灵活 指令的分类:全局指令,局部指令 在vm外面创建的指令 通过Vue.dire ...
- AngularJS -- 指令(创建自定义指令)
点击查看AngularJS系列目录 转载请注明出处:http://www.cnblogs.com/leosx/ 什么是指令 注:本指南是针对已经熟悉AngularJS基础知识的开发人员.如果你才刚 ...
随机推荐
- [原]CentOS7.2最小安装环境部署Asp.NET Core笔记
转载请注明原作者(think8848)和出处(http://think8848.cnblogs.com) 写在前面的话 不知不觉在cnblogs上注册已经10多年了,看我的园龄就直接暴露了我实际年龄, ...
- FFmpeg 转码和截屏
转码 (flv转码为MP4,libx264是MP4编码格式 , -b 3000k是码率,比特率) ffmpeg -i /home/ghr/mp4/mp4.flv -vcodec libx264 -b ...
- Newtonsoft.Json 序列化和反序列化 时间格式【转】
1.JSON序列化 string JsonStr= JsonConvert.SerializeObject(Entity); eg: A a=new A(); a.Name="Elain ...
- 一次kibana服务失败的排查过程
公司在kubernetes集群上稳定运行数月的kibana服务于昨天下午突然无法正常提供服务,访问kibana地址后提示如下信息: 排查过程: 看到提示后,第一反应肯定是检查elasticsearch ...
- 使用Eclipse进行远程调试
转自:http://blog.csdn.net/sunyujia/article/details/2614614 今天决定做件有意义的事,写篇图文并茂的blog,为什么要图文并茂?因为很多事可能用语言 ...
- java版简易socket客户端
android项目需要使用到心跳, 于是编写了一个简易的socket客户端程序 主要功能是给服务端发送心跳包,保持在线状态 没有使用框架,这样避免了需要引入包,直接使用的阻塞Socket通信. 主要逻 ...
- POJ 1149 PIGS
PIGS Time Limit: 1000MS Memory Limit: 10000K Total Submissions: 20579 Accepted: 9387 Description ...
- maven: 基本使用
1.项目管理工具:Maven的repository,说白了就是dependency的仓库,它按照一定的规则将dependency存放起来,以作缓存,如果本机的 repository找不到某个depen ...
- html5+css+div随时笔记
首先给头部文件引用格式 <link href="<%=basePath%>temp/public/css/style.css" rel="stylesh ...
- [原创] Delphi小工具(Windows资源管理器右键菜单扩展)
两个小工具 1. 项目临时文件清理 2. Android Ndk 编译 c/c++ jni 源码工具. 下载后,点击Reg.bat就可以完成注册安装.不需要时点击 UnReg.Bat 就可以删除菜单. ...