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

作者: 我要让全世界知道我狠低调
来源: 51数据库
2021-08-05

本文实例讲述了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"  rel="external nofollow" >
  <script type="text/javascript">
   var myapp = angular.module('myapp', []);
   myapp.controller('ctrl', function($scope){
    $scope.crumboptions = [
     {"href": "http://www.51sjk.com/Upload/Articles/1/0/283/283295_20210710001812728.com", "title" : "home"},
     {"href": "http://www.51sjk.com/Upload/Articles/1/0/283/283295_20210710001812744.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程序设计有所帮助。

推荐阅读