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没提供的需求的时候,就可以自定义个指令.指令的好处显而易 ...
随机推荐
- mysql java 类型对照 int
Java MySQL数据类型对照 类型名称 显示长度 数据库类型 JAVA类型 JDBC类型索引(int) 描述 VARCHAR L+N VARCHAR java.lang.S ...
- 洛谷NOIp热身赛题解
洛谷NOIp热身赛题解 A 最大差值 简单树状数组,维护区间和.区间平方和,方差按照给的公式算就行了 #include<bits/stdc++.h> #define il inline # ...
- Python的进阶：copy与deepcopy区别
copy()与deepcopy()之间的区分必须要涉及到python对于数据的存储方式. 首先直接上结论: —–我们寻常意义的复制就是深复制,即将被复制对象完全再复制一遍作为独立的新个体单独存在.所以 ...
- 负载均衡@StackExchange.Redis实现Session外置--纯干货喂饱你
Redis和StackExchange.Redis redis有多个数据库1.redis 中的每一个数据库,都由一个 redisDb 的结构存储.其中,redisDb.id 存储着 redis 数据库 ...
- nGrinder性能测试平台的安装部署
1.从GitHub下载war包: https://github.com/naver/ngrinder/releases 2.把ngrinder-controller-3.4.2.war重命名为ngri ...
- Windows下Redis集群搭建
1.第一步先安装Redis 参照<Windows下Redis安装及使用.docx> 在Redis目录E:/Redis下新建Logs文件夹,并且创建3个端口下的配置文件,记得修改里面的接口 ...
- 【 C# 】（一） ------------- 泛型带头节点的单链表，双向链表实现
在编程领域,数据结构与算法向来都是提升编程能力的重点.而一般常见的数据结构是链表,栈,队列,树等.事实上C#也已经封装好了这些数据结构,在头文件 System.Collections.Generic ...
- 2018爆零记第二弹之day0
话说初赛水了个70分,ε=(´ο｀*)))唉,还是太菜了. 今天两点左右到了电子科大对面宾馆,收拾安顿好后又去电子科大踩点. 进门又走过了不长不短的水杉道,来到了不大不小的西湖(为什么是这个名字... ...
- python—启动自带shell时报错（丢失api-ms-win-crt-runtime-l1-1-0.dll)已解决
备注: 有的伙伴安装完1后重启,问题可以解决,summer儿在安装完1依然未能解决,于是又进行了2的安装再次重启后问题解决!! 1,安装vc-redist.x64,微软官网搜索免费下载,安装后重启. ...
- Python数据分析工具库-Numpy 数组支持库（二）
1 shape变化及转置 >>> a = np.floor(10*np.random.random((3,4))) >>> a array([[ 2., 8., 0 ...