AngularJS自定义指令实现面包屑功能完整实例


Posted in Javascript onMay 17, 2017

本文实例讲述了AngularJS自定义指令实现面包屑功能。分享给大家供大家参考,具体如下:

<!DOCTYPE html>
<html lang="zh-CN" ng-app="myApp">
 <head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <script src="jquery.min.js"></script>
  <script src="angular.js"></script>
  <script src="bootstrap.min.js"></script>
  <link rel="stylesheet" href="bootstrap.min.css" rel="external nofollow" >
  <script type="text/javascript">
   var myApp = angular.module('myApp', []);
   myApp.controller('Ctrl', function($scope){
    $scope.crumbOptions = [
     {"href": "http://www.baidu.com", "title" : "Home"},
     {"href": "http://www.sina.com", "title" : "Library"},
     {"href": "", "title" : "Data"}
    ];
   });
   myApp.directive("custBreadcrumb", function() {
    return {
     restrict: 'E',
     replace: true,
     scope: {
      options:'@'
     },
     link: function(scope, elem, attrs) {
      var parentNode = elem.parent();
      var crumbString = '<ol class="breadcrumb">';
      angular.forEach(scope.$eval(scope.options), function(item) {
       if (item["href"] != "") {
        var tempString = '<li><a href="' + item[" rel="external nofollow" href"] + '">' + item["title"] + '</a></li>'; 
        crumbString += tempString;
       } else {
        var tempString = '<li class="active">' + item["title"] + '</li>'; 
        crumbString += tempString;
       }
      });
      crumbString += "</ol>";
      parentNode.append(crumbString);
     }
    };
   });
  </script>
 </head>
 <body ng-controller="Ctrl">
  <cust-breadcrumb options="{{crumbOptions}}"></cust-breadcrumb>
 </body>
</html>

希望本文所述对大家AngularJS程序设计有所帮助。

Javascript 相关文章推荐
javascript 动态添加表格行
Jun 22 Javascript
淘宝搜索框效果实现分析
Mar 05 Javascript
javaScript复制功能调用实现方案
Dec 13 Javascript
js鼠标及对象坐标控制属性详细解析
Dec 14 Javascript
JS中的二叉树遍历详解
Mar 18 Javascript
jQuery EasyUI封装简化操作
Sep 18 Javascript
JS给Array添加是否包含字符串的简单方法
Oct 29 Javascript
动态加载css方法实现和深入解析
Jan 18 Javascript
详解webpack-dev-server 设置反向代理解决跨域问题
Apr 18 Javascript
解决vue同一slot在组件中渲染多次的问题
Sep 06 Javascript
JS学习笔记之贪吃蛇小游戏demo实例详解
May 29 Javascript
bootstrap Table实现合并相同行
Jul 19 Javascript
jQuery Validate 无法验证 chosen-select元素的解决方法
May 17 #jQuery
AngularJS使用拦截器实现的loading功能完整实例
May 17 #Javascript
微信小程序城市定位的实现实例(获取当前所在国家城市信息)
May 17 #Javascript
微信小程序如何获知用户运行小程序的场景教程
May 17 #Javascript
bootstrap轮播图示例代码分享
May 17 #Javascript
bootstrap警告框示例代码分享
May 17 #Javascript
微信小程序中做用户登录与登录态维护的实现详解
May 17 #Javascript
You might like
一段php加密解密的代码
2007/07/16 PHP
PHP获取文件的MD5值并判断是否被修改的例子
2014/06/19 PHP
IE无法设置短域名下Cookie
2010/09/23 Javascript
读JavaScript DOM编程艺术笔记
2011/11/15 Javascript
封装了一个支持匿名函数的Javascript事件监听器
2014/06/05 Javascript
js匿名函数的调用示例(形式多种多样)
2014/08/20 Javascript
WEB前端设计师常用工具集锦
2014/12/09 Javascript
js点击选择文本的方法
2015/02/09 Javascript
JavaScrip调试技巧之断点调试
2015/10/22 Javascript
jquery事件的ready()方法使用详解
2015/11/11 Javascript
jQuery实现伪分页的方法分享
2016/02/17 Javascript
bootstrap警告框示例代码分享
2017/05/17 Javascript
Node.js 8 中的 util.promisify的详解
2017/06/12 Javascript
jquery获取链接地址和跳转详解(推荐)
2017/08/15 jQuery
Vue-cli 使用json server在本地模拟请求数据的示例代码
2017/11/02 Javascript
JQ图片文件上传之前预览功能的简单实例(分享)
2017/11/12 Javascript
通过JS深度判断两个对象字段相同
2019/06/14 Javascript
javascript设计模式 ? 原型模式原理与应用实例分析
2020/04/10 Javascript
如何配置vue.config.js 处理static文件夹下的静态文件
2020/06/19 Javascript
vue - props 声明数组和对象操作
2020/07/30 Javascript
JavaScript中EventBus实现对象之间通信
2020/10/18 Javascript
vue缓存之keep-alive的理解和应用详解
2020/11/02 Javascript
python的多重继承的理解
2017/08/06 Python
如何使用 Pylint 来规范 Python 代码风格(来自IBM)
2018/04/06 Python
python快速编写单行注释多行注释的方法
2019/07/31 Python
python多线程+代理池爬取天天基金网、股票数据过程解析
2019/08/13 Python
nginx搭建基于python的web环境的实现步骤
2020/01/03 Python
python+opencv3生成一个自定义纯色图教程
2020/02/19 Python
Vilebrequin欧洲官网:法国豪华泳装品牌(男士沙滩裤)
2018/04/14 全球购物
英国婴儿产品专家:Samuel Johnston
2020/04/20 全球购物
动态密码技术
2012/10/18 面试题
研究生求职自荐书
2014/06/23 职场文书
乡党委干部党的群众路线教育实践活动个人对照检查材料思想汇报
2014/10/01 职场文书
毕业生见习报告总结
2014/11/08 职场文书
React列表栏及购物车组件使用详解
2021/06/28 Javascript
PHP获取学生成绩的方法
2021/11/17 PHP