欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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

 更新時間：2017年05月17日 10:13:50   作者：timelessmemoryli  
這篇文章主要介紹了AngularJS自定義指令實現(xiàn)面包屑功能,結合完整實例形式分析了AngularJS自定義指令的定義、調用及面包屑功能的具體實現(xiàn)技巧,需要的朋友可以參考下

本文實例講述了AngularJS自定義指令實現(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>

更多關于AngularJS相關內容感興趣的讀者可查看本站專題：《AngularJS指令操作技巧總結》、《AngularJS入門與進階教程》及《AngularJS MVC架構總結》

希望本文所述對大家AngularJS程序設計有所幫助。

相關文章

最新評論