手風琴模式的菜單：

????在項目中我們會遇到不知層級的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. ????????????}); ????????} ????}; });

本文轉自 愛笑嘚蛋蛋 51CTO博客，原文鏈接：http://blog.51cto.com/dd118/1945954，如需轉載請自行聯系原作者

總結

以上是生活随笔為你收集整理的angularjs解决方案之 递归模板的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。