angularjs解決方案之 遞歸模板
阿新 • • 發佈:2017-07-10
遞歸模板
手風琴模式的菜單:
在項目中我們會遇到不知層級的json數據,需要前端人員去遍歷生成View視圖,這種情況下我們就會用到遞歸方法。
angularjs中的dom結構也是可以用遞歸的方式去循環遍歷數據。
<ul side-navigation class="nav metismenu" ng-include="‘navigations‘" id="side-menu"> </ul> <script id="navigations" type="text/ng-template"> <li ng-repeat="navs in functionGroups"> <a href="{{navs.functionpoint}}"><span class="nav-label">{{navs.name}}</span><span ng-if="navs.children.length" class="fa arrow"></span></a> <ul ng-if="navs.children.length" ng-include="‘navigations‘" class="nav nav-second-level" ng-init="functionGroups=navs.children"></ul> </li> </script>
另一種采用指令的方式:(未測試)
angular.module(‘demo‘).directive(‘recursion‘,function($compile){ function cpl(element, link){ // Normalize the link parameter if(angular.isFunction(link)){ link = { post: link }; } // Break the recursion loop by removing the contents var contents = element.contents().remove(); var compiledContents; return { pre: (link && link.pre) ? link.pre : null, /** * Compiles and re-adds the contents */ post: function(scope, element){ // Compile the contents if(!compiledContents){ compiledContents = $compile(contents); } // Re-add the compiled contents to the element compiledContents(scope, function(clone){ element.append(clone); }); // Call the post-linking function, if any if(link && link.post){ link.post.apply(null, arguments); } } }; } return { restrict:‘A‘, scope: {recursion:‘=‘}, template: ‘<li ng-repeat="item in recursion"> <a href="{{item.cateId}}.html">{{item.cateName}}</a> <ul recursion="item.child"> </ul> </li>‘, compile: function(element){ return cpl(element, function(scope, iElement, iAttrs, controller, transcludeFn){ // Define your normal link function here. // Alternative: instead of passing a function, // you can also pass an object with // a ‘pre‘- and ‘post‘-link function. }); } }; });
本文出自 “蛋蛋” 博客,請務必保留此出處http://yh118.blog.51cto.com/8638176/1945954
angularjs解決方案之 遞歸模板