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没提供的需求的时候,就可以自定义个指令.指令的好处显而易 ...
随机推荐
- PowerDesigner安装与使用教程
一.安装 PD下载:http://rj.baidu.com/soft/detail/16619.html?ald 补丁下载:http://pan.baidu.com/s/1hqEDUCG 图文安装教程 ...
- 【SDOI2017】新生舞会
题面 题解 一眼\(0/1\)分数规划 二分答案\(mid\),我们要\(\sum\limits_i a^{'}_i - mid\sum\limits_i b_i^{'}\)最大 那么我们将\(a_{ ...
- 牛客国庆集训派对Day1 B. Attack on Titan
B. Attack on Titan 链接 #include<cstdio> #include<algorithm> #include<cstring> #incl ...
- [BZOJ2742][HEOI2012]Akai的数学作业[推导]
题意 给定各项系数,求一元 \(n\) 次方程的有理数解. \(n\leq 100\). 分析 设答案为 \(\frac{p}{q}\) ,那么多项式可以写成 \(a_0\frac{p}{q}+a_1 ...
- js中哈希表的几种用法总结
本篇文章只要是对js中哈希表的几种用法进行了总结介绍,需要的朋友可以过来参考下,希望对大家有所帮助 1. <html> <head> <script type=" ...
- 【DOS】COPY命令
一:文件复制COPY 指令说明:复制一个或更多文件到指定位置,可以合并文件 语法:COPY [/A/B] source[/A|/B] [+source [/A|/b] [+...]][destinat ...
- MyCat安装与测试教程 超详细！
MyCat安装与测试教程 超详细! MyCat基础知识 一.什么是MYCAT? 1. 一个彻底开源的,面向企业应用开发的大数据库集群 2. 支持事务.ACID.可以替代MySQL的加强版数据库 3. ...
- 【视频编解码·学习笔记】13. 提取PPS信息程序
PPS结构解析 与之前解析SPS方式类似 一.定义PPS类: 在3.NAL Unit目录下,新建PicParamSet.cpp和PicParamSet.h,在这两个文件中写入类的定义和函数实现. 类定 ...
- （一）Hyperledger Fabric 1.1安装部署-基础环境搭建
在学习和开发hyperledger fabric的时候遇到了一些坑,现将自己的一些总结和心得整理如下,以期对大家有所帮助.本次使用的宿主机环境:ubuntu,版本:Ubuntu 16.04.3 LTS ...
- IDEA 2018 最新激活码 License server
IDEA 2018 最新激活码 License server 总会有一个属于适合你的!嘻嘻 http://hb5.s.osidea.cc:1017 http://idea.youbbs.org htt ...