angularjs解决方案之 递归模板

手风琴模式的菜单：

    在项目中我们会遇到不知层级的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.             });         }     }; });