angularJS1笔记-(12)-自定义指令(compile/link)
index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
</head>
<body>
<div ng-app="myApp">
<div ng-controller="firstController">
<div ng-repeat="user in users" custom-tags><a href="www.baidu.com">baidu</a></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', [])
.directive('customTags',function () {
return{
restrict:"ECAM",
template:"<div>aaa<span ng-transclude></span></div>",
replace:true,
transclude:true,
compile:function (tElement,tAttrs,transclude) {
console.log(tElement);
console.log(tAttrs);
console.log('customTags compile');
console.log("你好，我是编译阶段的方法"); //在编译阶段只执行一次
return function () {
console.log('compile return function')
}
}
}
})
.controller('firstController',['$scope',function ($scope) {
$scope.users = [
{
id:10,
name:'张三'
},
{
id:20,
name:'李四'
}
];
}]);
运行结果:
angularJS1笔记-(12)-自定义指令(compile/link)的更多相关文章
- angularJS1笔记-(11)-自定义指令(transclude/priority/terminal)
自定义指令的属性 transclude:为true时,允许把html中新定义的指令中原来的dom运用到该指令的template中. 属性priority,设置该指令的优先级,优先级大的先执行,默认指令 ...
- angularJS1笔记-(15)-自定义指令(accordion伸缩菜单原始实现)
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 ...
- 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 ...
- angular学习笔记(三十)-指令(5)-link
这篇主要介绍angular指令中的link属性: link:function(scope,iEle,iAttrs,ctrl,linker){ .... } link属性值为一个函数,这个函数有五个参数 ...
- AngularJS学习笔记(四) 自定义指令
指令(directive)是啥?简单来说就是实现一定功能的XXX...之前一直用的ng-model,ng-click等等都是指令.当我有一个ng没提供的需求的时候,就可以自定义个指令.指令的好处显而易 ...
- Vue笔记--通过自定义指令实现按钮操作权限
经常做中后台系统,此类系统的权限是比较重要,拿自己做过的一些项目做个笔记. Vue实现的中后台管理系统.按钮操作权限的空置一般都是通过自定义指令Vue.directive. <el-button ...
随机推荐
- 数据库oracle安装与卸载
安装的版本是oracle12-OraDb10g_home1服务端,先来卸载,如果电脑安装了oracle,在计算机-->管理-->服务里面可以看见下面三个oracle服务 首先我们要把它这里 ...
- Scala(四)：对象
对象:Object 1.单例对象 2.伴生对象 3.扩展类或特质的对象 4.apply方法 5.应用程序对象 6.枚举1.单例对象 Scala中没有你静态方法或静态字段,可以用object这个语法结构 ...
- JAVA Swing开发单机版项目
一.序 最近公司做的项目里出现了一个新的需求,项目大部分是为金融业定制开发的数据集成平台,包括数据的采集,处理,使用. 数据的采集方式不固定,有机构化数据,有非结构话数据,还有附件等其它文件形式. 对 ...
- HBase数据访问的一些常用方式
类型 特点 场合 优缺点分析 Native Java API 最常规和高效的访问方式 适合MapReduce作业并行批处理HBase表数据 Hbase Shell HBase的命令行工具,最简单的访问 ...
- 2_C语言中的数据类型 （八）运算符
1 运算符表达式和语句 1.1 基本运算符 1.1.1 = 数据对象:泛指数据在内存的存储区域 左值:表示可以被更改的数据对象 右值:能赋给左值的量 1 ...
- win8.1下右下角出现大小写切换状态显示框解决方案
HKEY_LOCAL_MACHINE\SOFTWARE\Cambridge Silicon Radio\Harmony\Default双击右侧 OSD 将键值改成0 重启机器 成功关闭显示
- 新建React Native项目步骤
根据官方环境 https://reactnative.cn/docs/getting-started/ 搭建好之后 1.新建项目 打开React Native 命令行工具,并输入 react-nati ...
- ITerm常用的快捷键
新建标签:command + t 关闭标签:command + w 切换标签:command + 数字 或者 command + 左右方向键 切换全屏:command + enter 查找:comma ...
- Vue渲染数据理解以及Vue指令
一.Vue渲染数据原理 原生JS改变页面数据,必须要获取页面节点,也即是进行DOM操作,jQuery之类的框架只是简化DOM操作的写法,实质并没有改变操作页面数据的底层原理,DOM操作影响性能(导致浏 ...
- Fortran的数组与指针
个人理解,欢迎指正 指针就是记录数据的内存地址的变量.指针可以指向单个变量,也可以指向数组. 数组是一个概念,是若干个类型相同的元素的有序集合.在Fortran语言中,数组中存放的元素,可以是整数,实 ...