首页 > 代码库 > angular学习笔记(三十)-指令(7)-compile和link(3)
angular学习笔记(三十)-指令(7)-compile和link(3)
本篇接着上一篇来讲解当指令中带有template(templateUrl)时,compile和link的执行顺序:
把上一个例子的代码再进行一些修改:
html:
<!DOCTYPE html><html ng-app="dirAppModule"><head> <title>20.8.2 指令-link和compile</title> <meta charset="utf-8"> <script src="../angular.min.js"></script> <script type="text/ng-template" id="text.html"> <div> <h3 ng-transclude></h3> </div> </script> <script src="script.js"></script> <style type="text/css"> h3 { color:#CB2027 } </style></head><body> <div ng-controller="compileCtrl"> <level-one> <level-two> <level-three> hello,{{name}} </level-three> </level-two> </level-one> </div></body></html>
js:
/*20.8.2 指令-compile和link*/var appModule = angular.module(‘dirAppModule‘,[]);appModule.directive(‘levelOne‘,function(){ return { restrict:‘E‘, scope:true, compile:function(tEle,tAttrs,trans){ console.log(‘compile→‘+‘levelOne‘+tEle.html()); return { pre:function(scope,iEle,iAttrs){ console.log(‘pre→‘+‘levelOne‘+iEle.html()) }, post:function(scope,iEle,iAttrs){ console.log(‘post→‘+‘levelOne‘+iEle.html()) } } } }});appModule.directive(‘levelTwo‘,function(){ return { restrict:‘E‘, scope:true, templateUrl:‘text.html‘, transclude:true, compile:function(tEle,tAttrs,trans){ console.log(‘compile→‘+‘levelTwo‘+tEle.html()); return { pre:function(scope,iEle,iAttrs){ console.log(‘pre→‘+‘levelTwo‘+iEle.html()) }, post:function(scope,iEle,iAttrs){ console.log(‘post→‘+‘levelTwo‘+iEle.html()) } } } }});appModule.directive(‘levelThree‘,function(){ return { restrict:‘E‘, scope:true, compile:function(tEle,tAttrs,trans){ console.log(‘compile→‘+‘levelThree‘+tEle.html()); return { pre:function(scope,iEle,iAttrs){ console.log(‘pre→‘+‘levelThree‘+iEle.html()) }, post:function(scope,iEle,iAttrs){ console.log(‘post→‘+‘levelThree‘+iEle.html()) } } } }});
我们把level-two改成一个具有templateUrl的指令,并且使用transclude把level-three指令给嵌套到模板去.得到的结果如下:
我们再修改一下这段代码:
<!DOCTYPE html><html ng-app="dirAppModule"><head> <title>20.8.2 指令-link和compile</title> <meta charset="utf-8"> <script src="../angular.min.js"></script> <script type="text/ng-template" id="text.html"> <div> <h3> <level-three> hello,{{name}} </level-three> </h3> </div> </script> <script src="script.js"></script> <style type="text/css"> h3 { color:#CB2027 } </style></head><body> <div ng-controller="compileCtrl"> <level-one> <level-two> </level-two> </level-one> </div></body></html>
我们把level-two下的level-three放到template模板里.然后再执行这段代码,结果如下:
详细的解释以后再写....
angular学习笔记(三十)-指令(7)-compile和link(3)
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。