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 Timer实现代码
Feb 17 Javascript
JavaScript 放大镜 放大倍率和视窗尺寸
May 09 Javascript
jQuery添加/改变/移除CSS类及判断是否已经存在CSS
Aug 20 Javascript
javascript判断图片是否加载完成的方法推荐
May 13 Javascript
Jquery AJAX POST与GET之间的区别详细介绍
Oct 17 Javascript
BootStrap与Select2使用小结
Feb 17 Javascript
jQuery简介_动力节点Java学院整理
Jul 04 jQuery
vue按需引入element Transfer 穿梭框
Sep 30 Javascript
在一个页面实现两个zTree联动的方法
Dec 20 Javascript
Node.js中,在cmd界面,进入退出Node.js运行环境的方法
May 12 Javascript
JavaScript函数的4种调用方法实例分析
Mar 05 Javascript
JS实现数组去重的11种方法总结
Apr 04 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的魔术常量__METHOD__简介
2014/07/08 PHP
Laravel中encrypt和decrypt的实现方法
2017/09/24 PHP
帮助避免错误的Javascript陷阱清单
2009/05/31 Javascript
js改变文章字体大小的实例代码
2013/11/27 Javascript
node.js中的fs.fchmod方法使用说明
2014/12/16 Javascript
使用JavaScript+canvas实现图片裁剪
2015/01/30 Javascript
JavaScript动态改变表格单元格内容的方法
2015/03/30 Javascript
js判断某个字符出现的次数的简单实例
2016/06/03 Javascript
JS实现页面中所有img对象添加onclick事件及新窗口查看图片的方法
2016/12/27 Javascript
jQuery niceScroll滚动条错位问题的解决方法
2018/02/03 jQuery
原生JS实现汇率转换功能代码实例
2020/05/13 Javascript
详细分析Node.js 模块系统
2020/06/28 Javascript
浅谈vue 组件中的setInterval方法和window的不同
2020/07/30 Javascript
Vue单文件组件开发实现过程详解
2020/07/30 Javascript
Vue 3自定义指令开发的相关总结
2021/01/29 Vue.js
[02:17]2016国际邀请赛中国区预选赛VG战队领队采访
2016/06/26 DOTA
Python中类的继承代码实例
2014/10/28 Python
Python的Bottle框架的一些使用技巧介绍
2015/04/08 Python
Python网络爬虫神器PyQuery的基本使用教程
2018/02/03 Python
python批量修改图片尺寸,并保存指定路径的实现方法
2019/07/04 Python
python实现在函数中修改变量值的方法
2019/07/16 Python
Django框架 querySet功能解析
2019/09/04 Python
Python-Flask:动态创建表的示例详解
2019/11/22 Python
在 Linux/Mac 下为Python函数添加超时时间的方法
2020/02/20 Python
python实现用户名密码校验
2020/03/18 Python
django ObjectDoesNotExist 和 DoesNotExist的用法
2020/07/09 Python
HTML5+CSS3:3D展示商品信息示例
2017/01/03 HTML / CSS
美国网上鞋子零售商:Dr. Scholl’s Shoes
2017/11/17 全球购物
美国大码时尚女装购物网站:ELOQUII
2017/12/28 全球购物
Foreo国际站:Foreo International
2018/10/29 全球购物
幼儿园元旦活动感言
2014/03/02 职场文书
工程承诺书怎么写
2014/05/24 职场文书
2014年9.18纪念日演讲稿
2014/09/14 职场文书
茶楼服务员岗位职责
2015/02/09 职场文书
导游词之天津古文化街
2019/11/09 职场文书
MongoDB误操作后使用oplog恢复数据
2022/04/11 MongoDB