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实现win8一样酷炫的动态磁贴效果(示例代码)
Jul 13 Javascript
javascript制作坦克大战全纪录(1)
Nov 27 Javascript
webapp框架AngularUI的demo改造之路
Dec 21 Javascript
javascript实现网页中涉及的简易运动(改变宽高、透明度、位置)
Nov 29 Javascript
Js获取图片原始宽高的实现代码
May 17 Javascript
AngularJS使用ng-app自动加载bootstrap框架问题分析
Jan 04 Javascript
react+redux的升级版todoList的实现
Dec 18 Javascript
Vuerouter的beforeEach与afterEach钩子函数的区别
Dec 26 Javascript
jQuery无冲突模式详解
Jan 17 jQuery
微信小程序实现蓝牙打印
Sep 23 Javascript
原生js拖拽实现图形伸缩效果
Feb 10 Javascript
JS正则表达式常见函数与用法小结
Apr 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
php获取一个变量的名字的方法
2014/09/05 PHP
php实现改变图片直接打开为下载的方法
2015/04/14 PHP
php中array_multisort对多维数组排序的方法
2020/06/21 PHP
form表单传递数组数据、php脚本接收的实例
2017/02/09 PHP
PHP完全二叉树定义与实现方法示例
2017/10/09 PHP
解决php用mysql方式连接数据库出现Deprecated报错问题
2019/12/25 PHP
使两个iframe的高度与内容自适应,且相等
2006/11/20 Javascript
Javascript与flash交互通信基础教程
2008/08/07 Javascript
Javascript 文件夹选择框的两种解决方案
2009/07/01 Javascript
onkeypress字符按键兼容所有浏览器使用介绍
2013/04/24 Javascript
Javascript中的call()方法介绍
2015/03/15 Javascript
jQuery ajaxForm()的应用
2016/10/14 Javascript
单击按钮发送验证码,出现倒计时的简单实例
2017/03/17 Javascript
JS实现css hover操作的方法示例
2017/04/07 Javascript
vue中子组件的methods中获取到props中的值方法
2018/08/27 Javascript
nodejs更新package.json中的dependencies依赖到最新版本的方法
2018/10/10 NodeJs
Webpack4 使用Babel处理ES6语法的方法示例
2019/03/07 Javascript
弱类型语言javascript开发中的一些坑实例小结【变量、函数、数组、对象、作用域等】
2019/08/07 Javascript
JS如何实现手机端输入验证码效果
2020/05/13 Javascript
[00:32]2018DOTA2亚洲邀请赛iG出场
2018/04/03 DOTA
分析Python中设计模式之Decorator装饰器模式的要点
2016/03/02 Python
解决python3中的requests解析中文页面出现乱码问题
2019/04/19 Python
python处理自动化任务之同时批量修改word里面的内容的方法
2019/08/23 Python
在Django中预防CSRF攻击的操作
2020/03/13 Python
解决Python 函数声明先后顺序出现的问题
2020/09/02 Python
使用Python判断一个文件是否被占用的方法教程
2020/12/16 Python
htmlentities() 和 htmlspecialchars()有什么区别
2015/07/01 面试题
高级护理专业大学生求职信
2013/10/24 职场文书
医药类个人求职的自我评价
2014/02/12 职场文书
竞选部长演讲稿
2014/04/26 职场文书
无房证明范本
2014/09/17 职场文书
群众路线专项整治方案
2014/10/27 职场文书
审美与表现自我评价
2015/03/09 职场文书
2015年度优秀员工推荐信
2015/03/23 职场文书
保研推荐信格式
2015/03/25 职场文书
2015年乡镇残联工作总结
2015/05/13 职场文书