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 ...
随机推荐
- c语言指针篇
不保证绝对正确,学习中所记录的一些笔记罢了,可能随着经历的增多,逐渐的完善, 不要完全相信我所记录的内容,可能因为编译协议版本的不同出现不同的结果. 也可能我写的根本就是错的,请相信自己动手得出来的结 ...
- C语言学习记录_2019.02.08
\n:换行: \t:制表符,相当于大空格: a[5]={2};<------->a[5]={2,0,0,0,0}; 数组初始化的方法:a[5]={0};即全部初始化为0: 数组初始化的 ...
- Spring boot ---- java.lang.NoClassDefFoundError: javax/servlet/ServletContext
Spring boot ---- java.lang.NoClassDefFoundError: javax/servlet/ServletContext 场景描述 项目中用到spring boo ...
- RabbitMQ(四):RPC的实现
原文:RabbitMQ(四):RPC的实现 一.RPC RPC(Remote Procedure Call)—远程过程调用,它是一种通过网络从远程计算机程序上请求服务,而不需要了解底层网络技术的协议. ...
- Autoanalyze 的注意事项
磨砺技术珠矶,践行数据之道,追求卓越价值 回到上一级页面:PostgreSQL内部结构与源代码研究索引页 回到顶级页面:PostgreSQL索引页 根据官方文档的说明 http://www.p ...
- 【转载】COM 组件设计与应用（十八）——属性包
原文:http://vckbase.com/index.php/wv/1265.html 一.前言 书接上回,本回着落在介绍属性包 IPersistPropertyBag 接口的实现方法和调用方式.属 ...
- 2-8 字典dict
1.如何在一个变量里存储公司每个员工的个人信息? 2.字典的定义与特性 字典是Python语言中唯一的映射类型. 定义:{key1:value1,key2:value2} 1.键与值用冒号“:”分开: ...
- 23-[jQuery]-效果：隐藏，淡出，盒子高度，动画
1.隐藏,显示 <!DOCTYPE html> <html lang="en"> <head> <meta charset="U ...
- cjoj P1435 - 【模板题 USACO】AC自动机 && 洛谷 P3796 【模板】AC自动机（加强版）
又打了一遍AC自动稽. 海星. 好像是第一次打trie图,很久以前就听闻这个思想了.OrzYYB~ // It is made by XZZ #include<cstdio> #inclu ...
- Eclipse启动Tomcat错误：Several ports (8080, 8009) required by Tomcat v6.0 Server at localhost are already
Eclipse启动Tomcat错误: Several ports (8080, 8009) required by Tomcat v6.0 Server at localhost are alread ...