angularJS1笔记-(11)-自定义指令(transclude/priority/terminal)
自定义指令的属性 transclude：为true时，允许把html中新定义的指令中原来的dom运用到该指令的template中。
属性priority，设置该指令的优先级，优先级大的先执行，默认指令的优先级是0（但ng-repeat指令的优先级默认是1000）。 属性terminal:为true时，指示优先级小于当前指令的指令都不执行，仅执行到本指令。
index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
</head>
<body>
<div ng-app="myApp">
<div ng-controller="firstController"> <custom-tags>
<div>$AAAAAA $我是指令[one-transclude]元素内部的内容</div>
</custom-tags>
<div custom-tags2 custom-tags3></div>
</div>
</div> <script type="text/javascript" src="../../vendor/angular/angularJs.js"></script>
<script type="text/javascript" src="app/index.js"></script> <script>
</script> </body>
</html>
index.js:
var myApp = angular.module('myApp', [])
//定义第一个指令customTags
.directive('customTags',function () {
return{
restrict:"ECAM",
template:"<div><span>新数据 </span><span ng-transclude></span>新数据</div>",//<span ng-transclude></span> 原来的dom
replace:true,//为true时，允许把节点内原来的dom放入template中
transclude:true //为true表明我们希望在模板中将指令的内部元素嵌入到模板中的某个位置 设置的template或templateUrl都必须仅由一个最外层标签包裹
}
})
//定义第二个指令customTags2
.directive('customTags2',function () {
return {
restrict:'ECAM',
template:'<div>222</div>',
replace:true,
priority:-1 //指示指令的优先级，优先级大的先执行，默认指令们的优先级都是0，但ng-repeat指令的优先级是1000
}
})
//定义第三个指令customTags3
.directive('customTags3',function () {
return {
restrict:'ECAM',
template:'<div>333</div>',
replace:true,
priority:0,
terminal:true //为true时，指示优先级小于本指令的优先级的directive都不再执行
}
})
.controller('firstController',['$scope',function ($scope) {
$scope.name = "张三";
}]);
运行结果:
angularJS1笔记-(11)-自定义指令(transclude/priority/terminal)的更多相关文章
- angularJS1笔记-(15)-自定义指令(accordion伸缩菜单原始实现)
index.html: <!DOCTYPE html> <html lang="en"> <head> <meta charset=&qu ...
- angularJS1笔记-(12)-自定义指令(compile/link)
index.html: <!DOCTYPE html> <html lang="en"> <head> <meta charset=&qu ...
- angularJS1笔记-(10)-自定义指令(templateUrl属性)
index.html: <!DOCTYPE html> <html lang="en"> <head> <meta charset=&qu ...
- angularJS1笔记-(9)-自定义指令(restrict/template/replace)
index.html: <!DOCTYPE html> <html lang="en"> <head> <meta charset=&qu ...
- angularJS1笔记-(14)-自定义指令(scope)
index.html: <!DOCTYPE html> <html lang="en"> <head> <meta charset=&qu ...
- angularJS1笔记-(13)-自定义指令(controller和controllerAs实现通信)
index.html: <!DOCTYPE html> <html lang="en"> <head> <meta charset=&qu ...
- Vue笔记--通过自定义指令实现按钮操作权限
经常做中后台系统,此类系统的权限是比较重要,拿自己做过的一些项目做个笔记. Vue实现的中后台管理系统.按钮操作权限的空置一般都是通过自定义指令Vue.directive. <el-button ...
- AngularJs学习笔记3——自定义指令
指令 概述: 前面也说过一些常用指令,用于快速入门.现在详细总结一下:指令用于实现各种页面的操作,是对于底层DOM操作的封装,扩展了HTML的行为,实现页面交互以及数据绑定. 指令是一种执行的信号,一 ...
- AngularJS学习笔记(四) 自定义指令
指令(directive)是啥?简单来说就是实现一定功能的XXX...之前一直用的ng-model,ng-click等等都是指令.当我有一个ng没提供的需求的时候,就可以自定义个指令.指令的好处显而易 ...
随机推荐
- 【转载】COM 组件设计与应用（十一）—— IDispatch 及双接口的调用
原文:http://vckbase.com/index.php/wv/1236.html 一.前言 前段时间,由于工作比较忙,没有能及时地写作.其间收到了很多网友的来信询问和鼓励,在此一并表示感谢.咳 ...
- P3900 [湖南集训]图样图森破
P3900 [湖南集训]图样图森破 链接 分析: 感觉像个暴力. 可以枚举回文串的回文中心,即枚举一个串,枚举一个串的位置作为回文中心,然后求出这个串内的回文串的长度. 此时如果回文串两端都没有到这个 ...
- CF567F/51nod2522 上下序列
CF567F/51nod2522 上下序列 考虑没有限制怎么做呢,就是从小往大加数,记录加到哪个数了还有左边有多少个数,然后这个数有两个,只能是左边放两个.右边放两个.左右各放一个.(实际上就是1,1 ...
- ssm 配置事务回滚
参考:https://blog.csdn.net/Mint6/article/details/78363761 在 applicationContext.xml 中配置好了事务和数据源等必须要用到的配 ...
- Linux 技巧
Linux Handbook For RedHat Enterprise Linux System System # clean old kernel packages package-cleanup ...
- CentOS7.2下配置SOCKS5代理
SOCKS介绍: 1.这里只做简单介绍. SOCKS5 是一个代理协议,它在使用TCP/IP协议通讯的前端机器和服务器机器之间扮演一个中介角色,使得内部网中的前端机器变得能够访问Int ...
- jsp servlet路径问题
最近做小作业时饱受路径问题的困扰,记录一下: 当工程目录如上所示时,路径应该这么写: 情况1:根目录下 login.jsp中的表单提交给Servlet时,可以直接写Servlet名: <form ...
- docker 安装vim
执行以下命令 apt-get update apt-get install vim
- 1042 Shuffling Machine
一.题目描述 Shuffling is a procedure used to randomize a deck of playing cards. Because standard shufflin ...
- python的多路复用实现聊天群
在我的<python高级编程和异步io编程>中我讲解了socket编程,这里贴一段用socket实现聊天室的功能的源码,因为最近工作比较忙,后期我会将这里的代码细节分析出来,目前先把代码贴 ...