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没提供的需求的时候,就可以自定义个指令.指令的好处显而易 ...
随机推荐
- Linux 和 Windows 之间共享文件之 samba
导语 如果对windows有过实际操作技巧的人都会明白,在windows下的文件共享加上网络驱动器映射是多么方便的体验,甚至比ftp更加的简单,就像本地多了一块可与他人交流的硬盘一样. 问题 由于性能 ...
- 一个导致MGR数据混乱Bug的分析和修复
1.背景 MGR是个好东西,因为他从本质上解决了数据不一致的问题.不光是解决了问题,而且出自名门正派(Oracle的MySQL团队),对品质和后续的维护,我们是可以期待的. 但是在调研的过程中,发现有 ...
- java多线程系列(一)---多线程技能
java多线程技能 前言:本系列将从零开始讲解java多线程相关的技术,内容参考于<java多线程核心技术>与<java并发编程实战>等相关资料,希望站在巨人的肩膀上,再通过我 ...
- 动态加载与插件系统的初步实现（二）：AppDomain卸载与代理
前一篇文章简单展示了类型发现和MEF使用,本文初步进入AppDomain相关内容. CLR程序运行时会创建默认程序集容器即AppDomain,默认AppDomain不支持卸载其程序集,但CLR支持创建 ...
- 2018年美国大学生数学建模竞赛(MCM/ICM) D题解题思路
首先整个赛题是一道集选址,优化,评价,预测的综合性赛题,对于任务 1,包括三个小问题,第一是有望完全电动化,那么就需要评价什么叫完全电动化,所以先建立一个基本的标准,比如人车比例达到多少.需要多少充电 ...
- 微信小程序—day01
前言 听说谷歌准备回中国了,玩了一下谷歌刚入驻微信的小程序:“猜画小歌”,又一次见识到了ai的强大魅力.看来python之路,前途还是一片光明的. 因为18年初时的“跳一跳”,带火了微信小程序,一直想 ...
- 【微服务架构】SpringCloud组件和概念介绍(一)
一:什么是微服务(Microservice) 微服务英文名称Microservice,Microservice架构模式就是将整个Web应用组织为一系列小的Web服务.这些小的Web服务可以独立地编译及 ...
- [笔试]CVTE 2019提前批 Windows应用开发笔试
不定项选择(x20) 数据结构 以abcdefg的顺序入栈,不可能出现的出栈顺序 一棵二叉树给出中序遍历和后序遍历结果,求左子树的节点数 操作系统 Linux中用什么指令可以找到文件中所有以" ...
- JetBrains激活 PyCharm | IntelliJ IDEA | CLion | WebStorm...
最近,JetBrains的IDE火了起来,身为学Java的人,放弃了Eclipse,选择了Idea,还真有点不舍得呢... 虽然Idea不错(在我看来,比Eclipse好用),但是,人家是收费的呀.. ...
- 程序员应该懂的ip地址知识汇总
1.A类ip由1字节(1字节是8位2进制数)的网络地址和3字节的主机地址组成,网络地址最高位必须是0,地址范围是从1.0.0.0到126.0.0.0,所以A类网络地址有126个,每个网络能容纳至少2^ ...