在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. c#与JavaScript实现对用户名、密码进行RSA非对称加密

    博主最近手上这个项目呢(就是有上百个万恶的复杂excel需要解析的那个项目,参见博客:http://www.cnblogs.com/csqb-511612371/p/4885930.html),由于是 ...

  2. 看完这篇让你对各种前端build工具不再懵逼!

    本文原标题为:我终于弄懂了各种前端build工具 译者:@Christian 译文:https://www.sdk.cn/news/5412 原文:https://medium.freecodecam ...

  3. 关于 redis、memcache、mongoDB 的对比

    从以下几个维度,对 redis.memcache.mongoDB 做了对比. 1.性能 都比较高,性能对我们来说应该都不是瓶颈. 总体来讲,TPS 方面 redis 和 memcache 差不多,要大 ...

  4. ubuntu终端窗口最大化(不是全屏)

    窗口最大化:ctrl+win窗+↑ 窗口还原:ctrl+win窗+↓ 这快捷键让人无语.好好的gnome被改造成unity,快捷键也改掉了.win窗+↑/↓为啥不用呢? 还有就是terminal的ta ...

  5. 批量从jar包中提取pom.xml

    将非maven项目转换为maven项目,首要第一步就是提取原工程依赖jar里的pom.xml,拼成<dependency>节点 import java.io.File; import ja ...

  6. 如何把家里的pc改装成linux服务器

    家里有一台pc笔记本闲置在家,最近想搭建一个ubuntu系统玩一下kvm. 这个方法能避免家里宽带每隔一段时间ip自动变换. 我用到了: 1.亚马逊的aws(ec2) 2.家里的路由器 3.aws里装 ...

  7. 埃拉托色尼筛法(Sieve of Eratosthenes)求素数。

    埃拉托色尼筛法(Sieve of Eratosthenes)是一种用来求所有小于N的素数的方法.从建立一个整数2~N的表着手,寻找i? 的整数,编程实现此算法,并讨论运算时间. 由于是通过删除来实现, ...

  8. web前端基础知识-(七)Django进阶

    通过上节课的学习,我们已经对Django有了简单的了解,现在来深入了解下~ 1. 路由系统 1.1 单一路由对应 url(r'^index$', views.index), 1.2 基于正则的路由 u ...

  9. Map集合及与Collection的区别、HashMap和HashTable的区别、Collections、

    特点:将键映射到值的对象,一个映射不能包含重复的键,每个键最多只能映射到一个值. Map集合和Collection集合的区别 Map集合:成对出现 (情侣)                       ...

  10. coreseek增量索引合并

    重建主索引和增量索引: [plain] view plain copy /usr/local/coreseek/bin/indexer--config /usr/local/coreseek/etc/ ...