手风琴模式的菜单:
在项目中我们会遇到不知层级的json数据,需要前端人员去遍历生成View视图,这种情况下我们就会用到递归方法。
angularjs中的dom结构也是可以用递归的方式去循环遍历数据。
1
2
3
4
5
6
7
8
|
< 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 >
|
另一种采用指令的方式:(未测试)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
|
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.
});
}
};
}); |