手风琴模式的菜单:
在项目中我们会遇到不知层级的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.
});
}
};
});