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