手风琴模式的菜单：

    在项目中我们会遇到不知层级的json数据，需要前端人员去遍历生成View视图，这种情况下我们就会用到递归方法。

    angularjs中的dom结构也是可以用递归的方式去循环遍历数据。

1
2
3
4
5
6
7
8
< 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 >

另一种采用指令的方式：（未测试）

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
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.
             });
         }
     };
});