angularjs - Angular中的面包屑

Question

我想使用Angular 的面包屑功能。我将此 javascript 文件添加到我的服务文件夹中。

我在 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 行）。