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 ...
随机推荐
- (文章转载)MCI编程
使用MCI API,源文件中需要包含头文件 Mmsystem.h,在Project->Settings->Link->Object/libray module中加入库 Winmm.l ...
- 20155236 2016-2017-2 《Java程序设计》第九周学习总结
20155236 2016-2017-2 <Java程序设计>第九周学习总结 教材学习内容总结 JDBC入门 1.JDBC简介 JDBC是用于执行SQL的解决方案,开发人员使用JDBC的标 ...
- c++ STL总结
https://blog.csdn.net/piaoxuezhong/article/details/54348787 http://net.pku.edu.cn/~yhf/UsingSTL.htm ...
- Linux下开发python django程序(Cookie读写)
1.设置cookie信息(登陆成功后设置登陆用户名,有效期1小时) def login(req): if req.method == 'POST': loginform = LoginForm(req ...
- python爬虫之Scrapy框架(CrawlSpider)
提问:如果想要通过爬虫程序去爬取”糗百“全站数据新闻数据的话,有几种实现方法? 方法一:基于Scrapy框架中的Spider的递归爬去进行实现的(Request模块回调) 方法二:基于CrawlSpi ...
- mongodb原生node驱动
写在前面 最近读<node.js学习指南>,对于mongodb没有介绍太多的工作原理,但是对于一个前端开发者,即使你还没有用过这种数据库也可以让你很好的理解和使用 一本非常好的 ...
- [原]Asp.net Core 2.1.2 测试成功Ajax上传文件新解法
利用layui框架可以上传文件调试拦截成功! [HttpPost] public IActionResult Method1(IFormFile file) { return Json(new{suc ...
- Genymotion模拟器安装问题及解决（启动失败，模拟器不能联网）
安装Genymotion模拟器安装后启动不了,报错: 百度的解决方法是打开VMVBirtualox选中自己的设备点击设置—常规—将版本设置为图中箭头所指的: 但是我这样做的时候发现我的下拉列表中没有6 ...
- 判断浏览器是chrome，Opera，Safari，Mac
function(){ return { isSafari: (navigator.userAgent.indexOf('Safari')>=0 || navigator.userAgent.i ...
- ETSI公布的多接入移动边缘计算概念验证
ETSI多接入移动边缘计算 公布的概念验证如下: 来源 MEC PoC Projects PoC#1: "Video User Experience Optimization via MEC ...