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，如需轉載請自行聯系原作者