如題,自己寫了兩個指令,想作用在同意元素下,先進行repeat,後進行bind,但目前,僅第一個執行bind
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<title>angular</title>
<script src="http://cdn.bootcss.com/angular.js/1.2.10/angular.min.js"></script>
</head>
<body ng-app="app">
<p ng-controller="test">
<input type="text" ng-model="msg">
<p lxc-bind="msg" lxc-reapeat="3">123123</p>
<!-- <p lxc-reapeat="3">lxc</p> -->
</p>
<script>
angular.module('app',[])
.controller('test',function($scope){
$scope.msg = 'test';
})
.directive('lxcBind',function(){
// Runs during compile
return {
restrict: 'A', // E = Element, A = Attribute, C = Class, M = Comment
link: function($scope, iElm, iAttrs, controller) {
$scope.$watch(iAttrs.lxcBind,function(newValue){
iElm.text(newValue);
})
}
};
})
.directive('lxcReapeat',function(){
return {
restrict:'A',
priority: 1000,
link:function($scope,$elm,$attr){
var repeatNum = $attr.lxcReapeat;
for (var i=repeatNum-2;i>= 0;i--){
var dom = $elm.clone();
$elm.after(dom);
}
}
}
})
</script>
</body>
</html>
第一點,
clone
方法只是複製節點,綁定的事件是不會被複製的。第二點,動態加入節點到文檔,angular 指令是不會生效的,需要動態編譯。
效果圖:
與
ng-repeat
上面這種實現,功能上沒有問題,但是陣型並不是很統一。於是,稍作修改
最終對比
请采纳
。