欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

AngularJS自定义指令实现面包屑功能完整实例

程序员文章站 2022-03-20 23:08:15
本文实例讲述了angularjs自定义指令实现面包屑功能。分享给大家供大家参考,具体如下:

本文实例讲述了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相关内容感兴趣的读者可查看本站专题:《angularjs指令操作技巧总结》、《angularjs入门与进阶教程》及《angularjs mvc架构总结

希望本文所述对大家angularjs程序设计有所帮助。