手风琴模式的菜单：

在项目中我们会遇到不知层级的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.
            });
        }
    };
});

本文转自 爱笑嘚蛋蛋 51CTO博客，原文链接：http://blog.51cto.com/dd118/1945954，如需转载请自行联系原作者

angularjs解决方案之 递归模板相关推荐

  1. 浅谈 CRTP：奇异递归模板模式

    浅谈 CRTP:奇异递归模板模式 前言 建议先看一遍文末的参考资料! 建议先看一遍文末的参考资料! 建议先看一遍文末的参考资料! 思维导图 一.CRTP 是什么 CRTP 全称 : Curiously ...

  2. HTML5商业解决方案公司网页模板

    简介: HTML5商业解决方案公司网页模板是一款橙红色样式的企业咨询和商业公司网站设计模板下载.aspku提示:本模板调用到谷歌字体库,可能会出现页面打开比较缓慢. 下载地址: http://www. ...

  3. 【C++】CRTP：奇异递归模板模式

    1. 什么是CRTP? 什么是CRTP?CRTP的全称是Curiously Recurring Template Pattern,即奇异递归模板模式,简称CRTP.CRTP是一种特殊的模板技术和使用方 ...

  4. JavaScript + Thymeleaf + Spring Boot——易班优课YOOC课群在线测试自动答题解决方案(十八)模板脚本

    前文 JavaScript--易班优课YOOC课群在线测试自动答题解决方案(一)答案获取 Spring Boot--易班优课YOOC课群在线测试自动答题解决方案(二)答案储存 Spring Boot- ...

  5. asp.net core web 解决方案多项目模板制作打包总结

    一.文件夹\项目结构 1.1.文件夹 net6.0:针对.net 6.0 项目模板 net6.0pack:针对net6.0打包 1.2.项目结构 Web\WebApi多项目.各层项目.单元测试项目 目 ...

  6. mysql递归查询解决方案_递归实践问题与解决方案

    mysql递归查询解决方案 Recursion practice problems: Here, you will find the various recursion practice proble ...

  7. 一个OA解决方案的经典模板

    为了保证公司利益,特把客户名称以"客户公司"代替,软件公司以"供应商"代替.请各位谅解! 引 言        6 第一部分  客户公司集团需求分析       ...

  8. 求不同字母全排列两种递归模板

    // ABCDE 所有排列 public class B { // aa: 待排数据// k: 考虑的当前位置(数组下标)static void f(char[] aa, int k){if(k==a ...

  9. 奇异递归模板模式（Curiously Recurring Template Pattern，CRTP）

    The Curiously Recurring Template Pattern (CRTP) is a C++ idiom whose name was coined by James Coplie ...

最新文章

  1. 【PP主数据】工作中心介绍
  2. SigmaStar SSD201 操作记录
  3. synchronized的用法
  4. DirectX SDK 重大版本变化记录[转]
  5. C++单例实现及回收（转）
  6. linux源码分析汇总
  7. 李开复给中国学生的四封信（转载）
  8. 可编程逻辑控制器类毕业论文文献都有哪些？
  9. ios 纯代码怎么适配ipad_iOS开发中iPhone和iPad的布局适配(工具篇)
  10. 解除计算机屏保密码设置密码,Win10锁屏密码怎么取消掉？Win10系统取消锁屏密码的两种方法...
  11. 【JAVA】对接苹果授权登录流程
  12. 浙江大学许威威教授招聘博士后
  13. git push方法
  14. 国外stripe支付，超简单几行代码搞定
  15. linux 软件安装及卸载
  16. 职场邮件的十大忌讳，你犯了吗？
  17. 漫谈程序员系列：咦，你也在混日子啊
  18. 【华为手机】如何关闭/卸载下滑出现的智慧搜索
  19. 青少年心理健康知识PPT模板
  20. Python入门 —— 04字符串解析

热门文章

  1. 2021年8月最新sci-hub可用网址，高速稳定
  2. Atlas Of Cardiovascular Emergencies 心血管急症图集
  3. 本工作簿不能再使用其他新字体_1.2.16 EXCEL篇之关于工作表的操作合集
  4. 设计模式——UML图
  5. Windows API入门系列之七 -完善MessageBox
  6. mysql为什么需要中间件_究竟为什么要引入数据库中间件
  7. 智能卡检测控制系统检测m1这么操作_土壤检测实验室仪器设备配置方案
  8. python中一个范围怎么表示_我应该如何处理Python中的包含范围？
  9. 广西区计算机一级全称是,计算机一级考试(广西区)历年真题-20210412075414.pdf-原创力文档...
  10. 数据科学中的Docker