在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. Mysql基本语句的总结

    1---------------创建一个表------------------------------------ drop table if exists 表名 create   table 表名( ...

  2. docker 常用命令(*)

    查找镜像 https://hub.docker.com/ search  --> centos7 一般docker 会有一个基础镜像,中间件镜像,应用镜像,生成一个镜像 docker build ...

  3. Freemarker中空值 null的处理++++定义数组

    http://blog.java-zone.org/archives/800.html <#list listBlogPost as blogPost> </#list> 如果 ...

  4. 【BZOJ-4197】寿司晚宴 状压DP

    4197: [Noi2015]寿司晚宴 Time Limit: 10 Sec  Memory Limit: 512 MBSubmit: 694  Solved: 440[Submit][Status] ...

  5. winform开发 总结1>winform程序使用线程的必要性,以及正确的使用方式

    winform程序中使用线程的必要性: 单线程操作在执行耗时任务时会造成界面假死,带来非常差劲的用户体验,有时候甚至会影响到正常的业务执行,使用多线程做相关操作实属不得已之举. 那么在编写程序之前必须 ...

  6. XPath 学习二: 语法

    XPath 使用路径表达式来选取 XML 文档中的节点或节点集.节点是通过沿着路径 (path) 或者步 (steps) 来选取的. 下面列出了最有用的路径表达式: 表达式 描述 nodename 选 ...

  7. form表单的属性标签

    form表单的常用标签 表单: <form id="" name="" method="post/get" action=" ...

  8. dict与list的in 操作的速度

    今天刷一道题,计算一串数字中其中两个数字相加等于目标值的题目,且取其中最早的两个数字(最后一个数字的位置靠前). 如[1,25,32,4,3,6,9,5]  targer:9  输出 [3,6]   ...

  9. Clang: Undefined symbols, but it is there using nm.

    https://stackoverflow.com/questions/36662920/xcode-clang-link-build-dynamic-framework-or-dylib-not-e ...

  10. ubuntu竖屏显示

    xrandr -o left 向左旋转90度 xrandr -o right 向右旋转90度 xrandr -o inverted 上下翻转 xrandr -o normal 回到正常角