快捷導(dǎo)航

AngularJS自定義指令實(shí)現(xiàn)面包屑功能完整實(shí)例

更新時(shí)間：2017年05月17日 10:13:50 作者：timelessmemoryli

這篇文章主要介紹了AngularJS自定義指令實(shí)現(xiàn)面包屑功能,結(jié)合完整實(shí)例形式分析了AngularJS自定義指令的定義、調(diào)用及面包屑功能的具體實(shí)現(xiàn)技巧,需要的朋友可以參考下

本文實(shí)例講述了AngularJS自定義指令實(shí)現(xiàn)面包屑功能。分享給大家供大家參考，具體如下：

<!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>

更多關(guān)于AngularJS相關(guān)內(nèi)容感興趣的讀者可查看本站專題：《AngularJS指令操作技巧總結(jié)》、《AngularJS入門與進(jìn)階教程》及《AngularJS MVC架構(gòu)總結(jié)》

希望本文所述對(duì)大家AngularJS程序設(shè)計(jì)有所幫助。

您可能感興趣的文章:

相關(guān)文章

詳解webpack+angular2開發(fā)環(huán)境搭建
這篇文章主要介紹了詳解webpack+angular2開發(fā)環(huán)境搭建，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2017-06-06
前后端如何實(shí)現(xiàn)登錄token攔截校驗(yàn)詳解
這篇文章主要給大家介紹了關(guān)于前后端如何實(shí)現(xiàn)登錄token攔截校驗(yàn)的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2018-09-09
AngualrJS中的Directive制作一個(gè)菜單
本文給大家介紹AngualrJS中的Directive制作一個(gè)菜單，涉及到angularjs directive相關(guān)知識(shí)，本文介紹的非常詳細(xì)，具有參考借鑒價(jià)值，特此分享供大家學(xué)習(xí)
2016-01-01
Angular2使用jQuery的方法教程
這篇文章主要給大家介紹了關(guān)于Angular2使用jQuery的方法教程，文中介紹的非常詳細(xì)，對(duì)大家具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來跟著小編一起學(xué)習(xí)學(xué)習(xí)吧。
2017-05-05
Angular.js實(shí)現(xiàn)獲取驗(yàn)證碼倒計(jì)時(shí)60秒按鈕的簡(jiǎn)單方法
最近做項(xiàng)目的時(shí)候又遇到了驗(yàn)證碼倒計(jì)時(shí)的需求，發(fā)現(xiàn)這個(gè)功能還是挺實(shí)用的，所以就想著總結(jié)一下，下面這篇文章主要給大家介紹了關(guān)于利用Angular.js如何實(shí)現(xiàn)獲取驗(yàn)證碼倒計(jì)時(shí)按鈕的簡(jiǎn)單方法，需要的朋友可以參考借鑒，下面來一起看看吧。
2017-10-10
AngularJS 過濾器的簡(jiǎn)單實(shí)例
本文主要介紹AngularJS 過濾器,這里提供詳細(xì)了AngularJS 過濾器詳細(xì)資料,并提供簡(jiǎn)單實(shí)例,有需要的朋友可以參考下
2016-07-07
Angular 5.0 來了! 有這些大變化
Angular 5.0 來了! 有這些重大變化,這篇文章就為大家介紹了Angular 5.0大變化，感興趣的小伙伴們可以參考一下
2017-11-11
AngularJS中$injector、$rootScope和$scope的概念和關(guān)聯(lián)關(guān)系深入分析
這篇文章主要介紹了AngularJS中$injector、$rootScope和$scope的概念和關(guān)聯(lián)關(guān)系,結(jié)合實(shí)例形式較為深入的分析了$injector、$rootScope和$scope的概念、功能、使用方法及相互之間的關(guān)系,需要的朋友可以參考下
2017-01-01
AngularJS實(shí)現(xiàn)單獨(dú)作用域內(nèi)的數(shù)據(jù)操作
這篇文章給大家介紹了利用AngularJs如何實(shí)現(xiàn)ng-repeat內(nèi)各個(gè)小的子作用域單獨(dú)數(shù)據(jù)綁定。有需要的小伙伴們可以參考借鑒，下面來一起看看吧。
2016-09-09
Angular.js ng-file-upload結(jié)合springMVC的使用教程
這篇文章主要給大家介紹了關(guān)于Angular.js文件上傳控件ng-file-upload結(jié)合springMVC的使用教程，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來一起看看吧。
2017-07-07