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 捕获窗口关闭事件
Jul 26 Javascript
Jquery实现三层遍历删除功能代码
Apr 23 Javascript
jquery实现可关闭的倒计时广告特效代码
Sep 02 Javascript
javascript时间排序算法实现活动秒杀倒计时效果
Jan 28 Javascript
浅析AngularJS中的指令
Mar 20 Javascript
浅谈JavaScript函数的四种存在形态
Jun 08 Javascript
Google 地图控件集详解及实例代码
Aug 06 Javascript
JavaScript设计模式之代理模式详解
Jun 09 Javascript
如何从头实现一个node.js的koa框架
Jun 17 Javascript
基于jquery实现彩色投票进度条代码解析
Aug 26 jQuery
vue 使用localstorage实现面包屑的操作
Nov 16 Javascript
ant design pro中可控的筛选和排序实例
Nov 17 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
ThinkPHP3.1新特性之对Ajax的支持更加完善
2014/06/19 PHP
Laravel重定向,a链接跳转,控制器跳转示例
2019/10/22 PHP
List the UTC Time on a Computer
2007/06/11 Javascript
jqeury eval将字符串转换json的方法
2011/01/20 Javascript
基于豆瓣API+Angular开发的web App
2015/01/02 Javascript
jquery搜索框效果实现方法
2015/01/16 Javascript
javascript实现树形菜单的方法
2015/07/17 Javascript
JavaScript的removeChild()函数用法详解
2015/12/27 Javascript
js实现简单的省市县三级联动效果实例
2016/02/18 Javascript
微信小程序 wx:key详细介绍
2016/10/28 Javascript
js定时器实例分享
2016/12/20 Javascript
jQuery验证表单格式的使用方法
2017/01/10 Javascript
jQuery实现简单弹窗遮罩效果
2017/02/27 Javascript
Node.js之网络通讯模块实现浅析
2017/04/01 Javascript
vue.js的computed,filter,get,set的用法及区别详解
2018/03/08 Javascript
基于Nuxt.js项目的服务端性能优化与错误检测(容错处理)
2019/10/23 Javascript
javascript将扁平的数据转为树形结构的高效率算法
2020/02/27 Javascript
基于vue hash模式微信分享#号的解决
2020/09/07 Javascript
vue $router和$route的区别详解
2020/12/02 Vue.js
vue+openlayers绘制省市边界线
2020/12/24 Vue.js
[03:47]2015国际邀请赛第三日现场精彩回顾
2015/08/08 DOTA
python中while循环语句用法简单实例
2015/05/07 Python
python爬虫入门教程--HTML文本的解析库BeautifulSoup(四)
2017/05/25 Python
python 禁止函数修改列表的实现方法
2017/08/03 Python
Python实现的文本对比报告生成工具示例
2018/05/22 Python
对Python+opencv将图片生成视频的实例详解
2019/01/08 Python
Python进阶:生成器 懒人版本的迭代器详解
2019/06/29 Python
Python Django切换MySQL数据库实例详解
2019/07/16 Python
对django的User模型和四种扩展/重写方法小结
2019/08/17 Python
如何快速一次性卸载所有python包(第三方库)呢
2020/10/20 Python
4款Python 类型检查工具,你选择哪个呢?
2020/10/30 Python
HTML5中如何显示视频呢 HTML5视频播放demo
2013/06/08 HTML / CSS
HTML5的表单(绝对特别强大的功能)使用示例
2013/06/20 HTML / CSS
技校毕业生个人学习的自我评价
2014/02/21 职场文书
广告语设计及教案
2014/03/21 职场文书
小区的门卫岗位职责
2014/10/01 职场文书