angularjs解决方案之 递归模板

手风琴模式的菜单：

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

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

<code>&lt;</code><code>ul</code> <code>side-navigation </code><code>class</code><code>=</code><code>"nav metismenu"</code> <code>ng-include</code><code>=</code><code>"'navigations'"</code> <code>id</code><code>=</code><code>"side-menu"</code><code>&gt;</code>

<code>&lt;/</code><code>ul</code><code>&gt;</code>

<code>&lt;</code><code>script</code> <code>id</code><code>=</code><code>"navigations"</code> <code>type</code><code>=</code><code>"text/ng-template"</code><code>&gt;</code>

<code>    </code><code>&lt;</code><code>li</code> <code>ng-repeat</code><code>=</code><code>"navs in functionGroups"</code><code>&gt;</code>

<code>        </code><code>&lt;</code><code>a</code> <code>href</code><code>=</code><code>"`navs`.`functionpoint`"</code><code>&gt;&lt;</code><code>span</code> <code>class</code><code>=</code><code>"nav-label"</code><code>&gt;`navs`.`name`&lt;/</code><code>span</code><code>&gt;&lt;</code><code>span</code> <code>ng-if</code><code>=</code><code>"navs.children.length"</code> <code>class</code><code>=</code><code>"fa arrow"</code><code>&gt;&lt;/</code><code>span</code><code>&gt;&lt;/</code><code>a</code><code>&gt;</code>

<code>        </code><code>&lt;</code><code>ul</code> <code>ng-if</code><code>=</code><code>"navs.children.length"</code> <code>ng-include</code><code>=</code><code>"'navigations'"</code> <code>class</code><code>=</code><code>"nav nav-second-level"</code> <code>ng-init</code><code>=</code><code>"functionGroups=navs.children"</code><code>&gt;&lt;/</code><code>ul</code><code>&gt;</code>

<code>    </code><code>&lt;/</code><code>li</code><code>&gt;</code>

<code>&lt;/</code><code>script</code><code>&gt;</code>

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

<code>angular.module(</code><code>'demo'</code><code>).directive(</code><code>'recursion'</code><code>,</code><code>function</code><code>($compile){</code>

<code> </code> 

<code>    </code><code>function</code> <code>cpl(element, link){</code>

<code>        </code><code>// Normalize the link parameter</code>

<code>        </code><code>if</code><code>(angular.isFunction(link)){</code>

<code>            </code><code>link = { post: link };</code>

<code>        </code><code>}</code>

<code>        </code><code>// Break the recursion loop by removing the contents</code>

<code>        </code><code>var</code> <code>contents = element.contents().remove();</code>

<code>        </code><code>var</code> <code>compiledContents;</code>

<code>        </code><code>return</code> <code>{</code>

<code>            </code><code>pre: (link &amp;&amp; link.pre) ? link.pre : </code><code>null</code><code>,</code>

<code>            </code><code>/**</code>

<code>             </code><code>* Compiles and re-adds the contents</code>

<code>             </code><code>*/</code>

<code>            </code><code>post: </code><code>function</code><code>(scope, element){</code>

<code>                </code><code>// Compile the contents</code>

<code>                </code><code>if</code><code>(!compiledContents){</code>

<code>                    </code><code>compiledContents = $compile(contents);</code>

<code>                </code><code>}</code>

<code>                </code><code>// Re-add the compiled contents to the element</code>

<code>                </code><code>compiledContents(scope, </code><code>function</code><code>(clone){</code>

<code>                    </code><code>element.append(clone);</code>

<code>                </code><code>});</code>

<code>                </code><code>// Call the post-linking function, if any</code>

<code>                </code><code>if</code><code>(link &amp;&amp; link.post){</code>

<code>                    </code><code>link.post.apply(</code><code>null</code><code>, arguments);</code>

<code>            </code><code>}</code>

<code>        </code><code>};</code>

<code>    </code><code>}</code>

<code>    </code> 

<code>    </code><code>return</code> <code>{</code>

<code>        </code><code>restrict:</code><code>'A'</code><code>,</code>

<code>        </code><code>scope: {recursion:</code><code>'='</code><code>},</code>

<code>        </code><code>template: </code><code>'&lt;li ng-repeat="item in recursion"&gt;\</code>

<code>                        </code><code>&lt;a href="`item`.`cateId`.html"&gt;`item`.`cateName`&lt;/a&gt;\</code>

<code>                        </code><code>&lt;ul recursion="item.child"&gt;\</code>

<code>                        </code><code>&lt;/ul&gt;\</code>

<code>                    </code><code>&lt;/li&gt;'</code><code>,</code>

<code>        </code><code>compile: </code><code>function</code><code>(element){</code>

<code>            </code><code>return</code> <code>cpl(element, </code><code>function</code><code>(scope, iElement, iAttrs, controller, transcludeFn){</code>

<code>                </code><code>// Define your normal link function here.</code>

<code>                </code><code>// Alternative: instead of passing a function,</code>

<code>                </code><code>// you can also pass an object with</code>

<code>                </code><code>// a 'pre'- and 'post'-link function.</code>

<code>            </code><code>});</code>

<code>    </code><code>};</code>

<code>});</code>

本文转自 爱笑嘚蛋蛋 51CTO博客，原文链接：http://blog.51cto.com/dd118/1945954，如需转载请自行联系原作者