前述したように、最初に繰り返しを実行し、次にバインドを実行する命令を 2 つ書きました。
认证高级PHP讲师
最初のポイントは、clone メソッドはノードのみを複製し、バインドされたイベントは複製されません。 2 番目の点は、ドキュメントにノードを動的に追加する場合、angular ディレクティブは有効にならず、動的コンパイルが必要になります。 clone方法只是克隆节点，绑定的事件是不会被克隆的。第二点，动态添加节点到文档，angular 指令是不会生效的，需要动态编译。
clone
angular.module('app',[]) // 注入 $compile 服务，用来动态编译 .directive('lxcReapeat',function($compile){ 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(); // 删除 lxc-reapeat 属性，否则动态编译会造成死循环。理解这点很重要 dom.removeAttr('lxc-reapeat'); // 动态编译并连接到scope var ele = $compile(dom)($scope); $elm.after(ele); } } } })
效果图：
与ng-repeat
ng-repeat
上面这种实现，功能上没有问题，但是阵型并不是很统一。于是，稍作修改
<!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="UTF-8"> <title>angular</title> <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script> </head> <body ng-app="app"> <p ng-controller="test"> <p ng-repeat="i in [1,2,3]">{{i}}</p> <input type="text" ng-model="msg"> <p lxc-bind="msg" lxc-reapeat="3">123123</p> </p> <script> angular.module('app',[]) .controller('test',function($scope){ $scope.msg = 'test'; }) .directive('lxcBind',function(){ return { restrict: 'A', link: function($scope, iElm, iAttrs, controller) { console.log(2) $scope.$watch(iAttrs.lxcBind,function(newValue){ iElm.text(newValue); }) } }; }) .directive('lxcReapeat',function($compile){ return { restrict:'A', priority: 1000, link: function(scope, iElement, iAttrs, controller){ var repeatNum = iAttrs.lxcReapeat, $parent = iElement.parent(), html = ''; iElement.remove(); for (var i = 0; i < repeatNum; i++){ if( i == 0 ){ html = '<!-- lxcReapeat: '+repeatNum+' -->'; }else{ html = '<!-- end lxcReapeat: '+repeatNum+' -->'; } var dom = iElement.clone()[0]; dom.removeAttribute('lxc-reapeat'); dom = $compile(html+dom.outerHTML)(scope); $parent.append(dom); dom.attr('lxc-reapeat', repeatNum).addClass('lxc-bind'); } $parent.append(html); } } }) </script> </body> </html>
最终对比
请采纳 リーリー
请采纳
採用してください
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
最初のポイントは、
cloneメソッドはノードのみを複製し、バインドされたイベントは複製されません。2 番目の点は、ドキュメントにノードを動的に追加する場合、angular ディレクティブは有効にならず、動的コンパイルが必要になります。
clone方法只是克隆节点，绑定的事件是不会被克隆的。第二点，动态添加节点到文档，angular 指令是不会生效的，需要动态编译。
效果图：
与
ng-repeat上面这种实现，功能上没有问题，但是阵型并不是很统一。于是，稍作修改
最终对比
レンダリング:请采纳リーリーng-repeat採用してください。 #🎜🎜#