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 相关文章推荐
jQuery中与toggleClass等价的程序段 以及未来学习的方向
Mar 18 Javascript
初试jQuery EasyUI 使用介绍
Apr 01 Javascript
jquery利用ajax调用后台方法实例
Aug 23 Javascript
javascript eval(func())使用示例
Dec 05 Javascript
js实现文字截断功能
Sep 14 Javascript
jQuery实现大图轮播
Feb 13 Javascript
微信小程序page的生命周期和音频播放及监听实例详解
Apr 07 Javascript
React根据宽度自适应高度的示例代码
Oct 11 Javascript
js推箱子小游戏步骤代码解析
Jan 10 Javascript
简单介绍react redux的中间件的使用
Apr 06 Javascript
详解vue-router传参的两种方式
Sep 10 Javascript
Vue 列表页带参数进详情页的操作(router-link)
Nov 13 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
PHP4实际应用经验篇(8)
2006/10/09 PHP
PHP 冒泡排序 二分查找 顺序查找 二维数组排序算法函数的详解
2013/06/25 PHP
php pki加密技术(openssl)详解
2013/07/01 PHP
ThinkPHP实现非标准名称数据表快速创建模型的方法
2014/11/29 PHP
深入分析JSONP跨域的原理
2014/12/10 Javascript
javascript实现回车键提交表单方法总结
2015/01/10 Javascript
JavaScript setTimeout使用闭包功能实现定时打印数值
2015/12/18 Javascript
针对JavaScript中this指向的简单理解
2016/08/26 Javascript
Angular和Vue双向数据绑定的实现原理(重点是vue的双向绑定)
2016/11/22 Javascript
Vue.js第三天学习笔记(计算属性computed)
2016/12/01 Javascript
微信小程序 弹窗自定义实例代码
2017/03/08 Javascript
vue快捷键与基础指令详解
2017/06/01 Javascript
带你了解session和cookie作用原理区别和用法
2017/08/14 Javascript
元素全屏的设置与监听实例
2017/11/28 Javascript
JQuery获取可视区尺寸和文档尺寸及制作悬浮菜单示例
2019/05/14 jQuery
实现一个 Vue 吸顶锚点组件方法
2019/07/10 Javascript
jQuery实现手风琴效果(蒙版)
2020/01/11 jQuery
我所理解的JavaScript中的this指向
2020/09/04 Javascript
python分割文件的常用方法
2014/11/01 Python
Python中Numpy包的安装与使用方法简明教程
2018/07/03 Python
tensorflow 初始化未初始化的变量实例
2020/02/06 Python
keras .h5转移动端的.tflite文件实现方式
2020/05/25 Python
骆驼官方商城:CAMEL
2016/11/22 全球购物
英国音乐设备和乐器商店:Gear4music
2017/10/16 全球购物
在C++ 程序中调用被C 编译器编译后的函数,为什么要加extern "C"
2014/08/09 面试题
个人社会实践自我鉴定
2014/03/24 职场文书
优秀工作者事迹材料
2014/12/26 职场文书
2015年先进个人自荐书
2015/03/24 职场文书
2015教师年度考核评语
2015/03/25 职场文书
2015小学语文教师个人工作总结
2015/05/20 职场文书
如何写观后感
2015/06/19 职场文书
新闻稿件写作技巧
2015/07/18 职场文书
推普标语口号大全
2015/12/26 职场文书
区域销售大会开幕词
2016/03/04 职场文书
HTML页面滚动时部分内容位置固定不滚动的实现
2021/04/14 HTML / CSS
go语言中GOPATH GOROOT的作用和设置方式
2021/05/05 Golang