Angular中的面包屑

Question

我想使用Angular的breadcrumb功能.我将此javascript文件添加到我的services文件夹中.

我在header.html文件中添加了一个div来调用javascript.根据Angular的说法,div应该如下所示:

<div>
  <ul class="breadcrumb">
    <li ng-repeat="breadcrumb in breadcrumbs.getAll()">
      <span class="divider">/</span>
      <ng-switch on="$last">
        <span ng-switch-when="true">{{breadcrumb.name}}</span>
        <span ng-switch-default><a href="{{breadcrumb.path}}">{{breadcrumb.name}}</a></span>
       </ng-switch>
    </li>
   </ul>
</div>

正在创建div,当我检查它时,我看到了
<!-- ngRepeat: breadcrumb in breadcrumbs.getAll() -->

但没有面包屑.有任何想法吗？

Answer 1

仅将HTML添加到标题模板文件是不够的.确保您还完成了以下操作:

1. 包含breadcrumbs.js在主HTML模板中(通常是index.html):

   <script type="text/javascript" src="your-project-folder/services/breadcrumbs.js"></script>
   

2. 包含services.breadcrumbs为主应用程序的模块依赖项:

   angular.module('myMainApp', ['services.breadcrumbs']);
   

3. 最后,确保实际将breadcrumbs服务注入控制器,然后将其附加到$ scope:

   angular.module('myMainApp').controller('FooBarCtrl', function($scope, breadcrumbs) {
       $scope.breadcrumbs = breadcrumbs;
   
       // ... other controller logic ...
   });
   

您可以在app.js文件的angular-app项目中看到步骤2和3的实现(参见第6,60和62行).