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没提供的需求的时候,就可以自定义个指令.指令的好处显而易 ...
随机推荐
- c++ 方框中绘制菜单代码
绘制静态菜单 getch与getchar 接收光标控制 一.绘制静态菜单 编写函数void mainmenu( void) 二.getch与getchar getch()的作用是从键盘接收一个字 ...
- HBase数据结构（读书笔记 ）
背景: 最近在做一些跟大数据相关的东西,涉及到数据的存储和分析,考虑各个方面,选择使用HBase进行存储,使用原生Java API进行数据分析,之后会陆续写一系列来说明最近做的东西,给像我这样未曾涉及 ...
- 基于socketserver实现并发
基于tcp的套接字,关键就是两个循环,一个链接循环,一个通信循环 socketserver模块中分两大类:server类(解决链接问题)和request类(解决通信问题) 一.分析socketserv ...
- asp.net core结合NLog搭建ELK实时日志分析平台
0.整体架构 整体架构目录:ASP.NET Core分布式项目实战-目录 一.介绍ELK 1.说明(此篇ELK采用rpm的方式安装在服务器上)-牛刀小试 承接上一篇文章的内容准备部署ELK来展示asp ...
- SQL Server Management Studio 评估期已过
SQL2008破解: (1)将SQL安装光盘(或者ISO)放进去运行,进入安装界面. (2)选择“维护”中的“版本升级”,如图: (3)按照版本升级的向导,先输入产品密钥,也就是正式企业版的序列号: ...
- TensorFlow API 汉化
TensorFlow API 汉化 模块:tf 定义于tensorflow/__init__.py. 将所有公共TensorFlow接口引入此模块. 模块 app module:通用入口点脚本. ...
- nginx解析漏洞，配置不当，目录遍历漏洞环境搭建、漏洞复现
nginx解析漏洞,配置不当,目录遍历漏洞复现 1.Ubuntu14.04安装nginx-php5-fpm 安装了nginx,需要安装以下依赖 sudo apt-get install libpcre ...
- Python自动化运维
一.DNS域名轮询业务监控 链接:https://www.cnblogs.com/baishuchao/articles/9128953.html 二.文件内容差异对比方法 链接:https://ww ...
- 来源自rnnoise，但非rnn
很快又一年过去了. 自学音频算法也近一年了. 不记得有多少个日日夜夜, 半夜醒来,就为验证算法思路. 一次又一次地改进和突破. 傻逼样的坚持,必然得到牛逼样的结果. 这一年,主要扎音频算法上. 经常有 ...
- phpcms 容许英文目录有空格
在PHPCMS添加栏目里面,有个选项是 英文目录,这里目录可以用作伪静态功能.这么英文不能有空格等特殊字符.但是如果页面中需要引用包含空格的字符呢,例如,关于我们页面,我要显示英文about us.那 ...