发布于 3年前
Angular 利用自定义指令封装一个自己的ngRepeat
angular中经常用到ng-repeat这个指令 那么如何写一个自己的循环指令呢，
下面咱们一起看一下如何自己封装一个myRepeat
<html ng-app="myApp" ng-controller='myCtrl'>
<head>
<title></title>
<script src="https://cdn.bootcss.com/angular.js/1.2.0/angular.js"></script>
</head>
<body>
<div my-repeat='data in datas'>
{{data}}
<input type="" ng-model="data" name="">
</div>
<hr/>
<div ng-repeat='data in datas'>
{{data}}
<input type="" ng-model="data" name="">
</div>
<div ng-repeat='data in datas'>
{{data}}
<input type="" ng-model="data" name="">
</div>
<input type="" ng-model="datas[0]" name="">
<script type="text/javascript">
angular.module('myApp', [])
.controller('myCtrl', ['$scope', function($scope) {
$scope.datas = [
1,2,3
];
}])
/*
*循环作用域属性：$key或$index ；这取决于你循环的是对象还是数组
*/
.directive('myRepeat', ['$compile', '$animate', function($compile, $animate) {
return {
restrict: 'A',
transclude: 'element',
priority: 1000,
/*linker：传入一个scope返回当前编译后的dom节点*/
compile: function(element, attr, linker) {
return function($scope, $element, $attr) {
var command = $attr.myRepeat;
var commandArr = command.split(' in ');
commandArr = commandArr.map(function(item) {
item.replace(/\s/g, '');
return item;
});
var _this = commandArr[0];
var comment = $element[0];
/*上次数据*/
var lastBlockMap = {};
/*这次数据*/
var nextBlockMap = {};
$scope.$watch(commandArr[1], function(source) {
var childScope,
hashKey,
block;
if (source) {
nextBlockMap={};
var sourceType = Object.prototype.toString.call(source).split(' ')[1].replace(']','');
if(sourceType==='Array'){
for (var i = 0; i < source.length; i++) {
//组装当前id;
var _thisid = 'string:'+i+' '+source[i];
/*将未改动的剔除*/
if (lastBlockMap.hasOwnProperty(_thisid)) {
nextBlockMap[_thisid] = lastBlockMap[_thisid];
delete lastBlockMap[_thisid];
} else {
/*对将要循环的数据添加数据*/
nextBlockMap[_thisid] = {
data : source[i],
i : i
};
}
}
}else{
for(var key in source){
if(key==='$$hashKey') continue;
//组装当前id;
var _thisid = 'string:'+key;
/*将未改动的剔除*/
if (lastBlockMap.hasOwnProperty(_thisid)) {
nextBlockMap[_thisid] = lastBlockMap[_thisid];
delete lastBlockMap[_thisid];
} else {
/*对将要循环的数据添加数据*/
nextBlockMap[_thisid] = {
data : source[key],
key : key
};
}
}
}
/*找出本次改动所对应的历史项 主要是为了在原来位置进行添加dom*/
for(var _key in lastBlockMap){
block = lastBlockMap[_key];
lastBlockMap[_key].scope.$destroy();
angular.element(lastBlockMap[_key].thisNode).remove();
//$(lastBlockMap[_key].comment).remove();
}
/*添加数据*/
for (var key in nextBlockMap) {
/*本次需要更新的节点*/
if(block&&!nextBlockMap[key].thisNode){
comment = block.comment;
}
/*没有改动 或 有改动但历史节点为空*/
if(!block||(block&&!nextBlockMap[key].thisNode)){
childScope = $scope.$new();
childScope[_this] = nextBlockMap[key].data;
childScope['$index'] = nextBlockMap[key].i;
childScope['$key'] = nextBlockMap[key].key;
nextBlockMap[key] = {};
nextBlockMap[key]['scope'] = childScope;
nextBlockMap[key]['id'] = key;
linker(childScope, function(clone) {
var lastComment = document.createComment('end myRepeat: ' + command + ' ');
clone[clone.length++] = lastComment;
nextBlockMap[key]['comment'] = comment;
nextBlockMap[key]['thisNode'] = clone[0];
angular.element(comment).after(clone);
comment = lastComment;
})
}
}
/**/
lastBlockMap = nextBlockMap;
}
}, true)
}
}
}
}])
</script>
</body>
</html>
