angularjs使用图标的面包屑

时间:2017-03-14 05:36:58

标签: angularjs breadcrumbs

<li><a href="dashboard.html"><i class="iconfa-home"></i></a> <span class="separator"></span></li>
             <li><div ncy-breadcrumb style="padding-top: 1px;"></div></li>

Controller:
data:{
          ncyBreadcrumbLabel:'<span class="iconfa-home"></span>'
       }

我想要面包屑就像当我在仪表板页面上我想要主页按钮时,当我在其他页面上时,我想要像家庭按钮那样breacrumb&gt; “页面名”。那可能吗?

1 个答案:

答案 0 :(得分:0)

有可能,简单的方法是

<ol class="breadcrumb">
   <li><a href="#/"><i class="fa fa-dashboard"></i>{{Home}}</a></li>
   <li ng-repeat="breadcrumb in breadcrumbs track by $index" ng-if="breadcrumb != ''" ng-class="{ active : $last }" >
        <a ng-href="{{($last) ? 'javascript:void(0)' : '#/'+breadcrumb}}">{{breadcrumb}}</a>
   </li>
</ol>

你可以在$ routeChangeSuccess事件中生成breadcrum

$rootScope.$on('$routeChangeSuccess', function () {
   $rootScope.breadcrumbs = $location.path().split("/");
});