Angular中的面包屑

【问题标题】：Breadcrumbs in AngularAngular中的面包屑
【发布时间】：2013-06-08 00:18:10
【问题描述】：

我想使用Angular's breadcrumb capability。我将此 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，当我检查它时，我看到了


但没有面包屑。有什么想法吗？

【问题讨论】：

标签： angularjs angularjs-directive breadcrumbs

【解决方案1】：

仅将 HTML 添加到您的标头模板文件是不够的。确保您还完成了以下任务：

在您的主 HTML 模板（通常是 index.html）中包含 breadcrumbs.js：

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

包含services.breadcrumbs 作为主应用程序的模块依赖项：
```
angular.module('myMainApp', ['services.breadcrumbs']);
```

最后，确保您确实将breadcrumbs 服务注入您的控制器，然后将其附加到$scope：

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

    // ... other controller logic ...
});

可以在 angular-app 项目in the app.js file 中看到步骤 2 和 3 的实现（参考第 6、60 和 62 行）。

【讨论】：

谢谢，这正是我想要的