angularjs解决方案之 递归模板

手风琴模式的菜单

在项目中我们会遇到不知层级的json数据,需要前端人员去遍历生成View视图,这种情况下我们就会用到递归方法

angularjs中的dom结构也是可以用递归的方式去循环遍历数据。

<ulside-navigationclass="navmetismenu"ng-include="'navigations'"id="side-menu">
</ul>
<scriptid="navigations"type="text/ng-template">
<ling-repeat="navsinfunctionGroups">
		<ahref="{{navs.functionpoint}}"><spanclass="nav-label">{{navs.name}}</span><spanng-if="navs.children.length"class="faarrow"></span></a>
<ulng-if="navs.children.length"ng-include="'navigations'"class="navnav-second-level"ng-init="functionGroups=navs.children"></ul>
</li>
</script>

另一种采用指令的方式:(未测试)

angular.module('demo').directive('recursion',function($compile){

functioncpl(element,link){
//Normalizethelinkparameter
if(angular.isFunction(link)){
link={post:link};
}

//Breaktherecursionloopbyremovingthecontents
varcontents=element.contents().remove();
varcompiledContents;
return{
pre:(link&&link.pre)?link.pre:null,/**
*Compilesandre-addsthecontents
*/
post:function(scope,element){
//Compilethecontents
if(!compiledContents){
compiledContents=$compile(contents);
}
//Re-addthecompiledcontentstotheelement
compiledContents(scope,function(clone){
element.append(clone);
});

//Callthepost-linkingfunction,ifany
if(link&&link.post){
link.post.apply(null,arguments);
}
}
};
}

return{
restrict:'A',scope:{recursion:'='},template:'<ling-repeat="iteminrecursion">\
<ahref="{{item.cateId}}.html">{{item.cateName}}</a>\
<ulrecursion="item.child">\
</ul>\
</li>',compile:function(element){

returncpl(element,function(scope,iElement,iAttrs,controller,transcludeFn){
//Defineyournormallinkfunctionhere.
//Alternative:insteadofpassingafunction,//youcanalsopassanobjectwith
//a'pre'-and'post'-linkfunction.
});
}
};
});

相关文章

AngularJS 是一个JavaScript 框架。它可通过 注:建议把脚本放在 元素的底部。这会提高网页加载速度,因...
angluarjs中页面初始化的时候会出现语法{{}}在页面中问题,也即是页面闪烁问题。出现这个的原因是:由于...
AngularJS 通过被称为指令的新属性来扩展 HTML。AngularJS 指令AngularJS 指令是扩展的 HTML 属性,带有...
AngularJS 使用表达式把数据绑定到 HTML。AngularJS 表达式AngularJS 表达式写在双大括号内:{{ expres...
ng-repeat 指令可以完美的显示表格。在表格中显示数据 {{ x.Name }} {{ x.Country }} 使用 CSS 样式为了...
$http是 AngularJS 中的一个核心服务,用于读取远程服务器的数据。读取 JSON 文件下是存储在web服务器上...