在angular学习笔记(三十)-指令(4)-transclude文章的末尾提到了,如果在指令中需要反复使用被嵌套的那一坨,需要使用transclude()方法.
在angular学习笔记(三十)-指令(5)-link文章也提到了link函数的第五个参数linker.
这篇文章就来讲解一下transclude()方法(linker()方法),是怎么使用的,另外,它也是compile函数的第三个参数,用法一样.
下面就通过自己写一个简易的模拟ngRepeat的指令cbRepeat,来了解linker函数是怎么工作的.同时可以增进对指令的理解.
html:
<!DOCTYPE html>
<html ng-app="dirAppModule">
<head>
<title>20.8.1 指令-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">
<span ng-click="reset()">添加一个元素</span>
<span ng-click="resetBunny()">修改一个元素</span>
<div cb-repeat="thing in things">
<my-widget><span>{{thing}}</span></my-widget>
</div>
</div>
</body>
</html>
js:
/*20.8.1 指令-compile和link*/
var appModule = angular.module(‘dirAppModule‘,[]);
appModule.controller(‘compileCtrl‘,function($scope){
$scope.things=[‘bunny‘,‘cat‘,‘dog‘];
$scope.reset=function(){
$scope.things.push(‘pig‘);
console.log($scope.things)
};
$scope.resetBunny=function(){
$scope.things[0]=‘Bunny‘
}
});
appModule.directive(‘cbRepeat‘,function(){
return {
restrict:‘EAC‘,
transclude:‘element‘,
compile:function(tEle,tAttrs,trans){
console.log(‘compile-cbRepeat‘);
return function(scope,iEle,iAttrs,ctrl,linker){
console.log(‘post-cbRepeat‘);
//scope.$new()创建一个作用域的子作用域
//console.log(scope.$new().$parent==scope);
var myLoop = iAttrs.cbRepeat,
match = myLoop.match(/\s*(.+)\s+in\s+(.*)\s*/),
indexString = match[1],
collectionString = match[2],
parentEle = iEle.parent(),
elements = [];
scope.$watchCollection(collectionString,function(collection){
if(elements.length>0){
for(var i= 0;i<elements.length;i++){
elements[i].el.remove();
elements[i].scope.$destroy();
}
elements = [];
}
for(var i=0;i<scope[collectionString].length;i++){
var newScope = scope.$new();
newScope[indexString] = scope[collectionString][i];
linker(newScope,function(clone){
parentEle.append(clone);
var element = {};
element.el = clone;
element.scope = newScope;
element.scope.$on(‘$destroy‘,function(){
console.log(‘被移除‘)
});
elements.push(element);
})
}
})
}
}
}
});
appModule.directive(‘myWidget‘,function(){
return {
restrict:‘E‘,
templateUrl:‘text.html‘,
replace:true,
transclude:true,
scope:true,
compile:function(tEle,tAttrs,trans){
//compile函数的tEle是原始的templateElement,也就是<div><h3 ng-transclude></h3></div>
console.log(‘compile-myWidget‘+tEle.html());
return function(scope,iEle,iAttrs){
//link函数的iEle是tEle经过实例化以后的instanceElement,也就是
//<div><h3 ng-transclude=""><span class="ng-binding ng-scope">{{thing}}</span></h3></div>
console.log(‘post-myWidget‘+iEle.html())
}
}
//简单的说,tElement就是原始的,元素一开始是什么样子,它还是什么样子,所以它没有作用域.
//而iElement是经过ng编译的,添加了ng-binding,ng-scope,所以它有作用域.
}
});
时间： 2024-12-26 04:08:57