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.            });        }    };});

本文出自 “蛋蛋” 部落格，請務必保留此出處http://yh118.blog.51cto.com/8638176/1945954

angularjs解決方案之 遞迴模板