在角面包屑 [英] Breadcrumbs in Angular

问题描述

我想用<一个href=\"https://github.com/angular-app/angular-app/blob/master/client/src/common/services/breadcrumbs.js\">Angular's面包屑能力。我说这个javascript文件到我的服务文件夹。

I want to use Angular's breadcrumb capability. I added this javascript file to my services folder.

我添加一个div到我了header.html文件来调用JavaScript。据角，在div应该是这样的：

I added a div to my header.html file to call the javascript. According to Angular, the div should look like this:

<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>

正在创建的分区，当我检查它，我看结果
＆LT; - ngRepeat：面包屑在breadcrumbs.getAll（） - GT;

但是，没有面包屑。任何想法？

But no breadcrumbs. Any ideas?

推荐答案

这是不够的，只是将HTML添加到您的头模板文件。请确保你已完成了以下内容：

It's not enough to just add the HTML to your header template file. Make sure you've also completed the following:

1. 包含 breadcrumbs.js 在你的主HTML模板（通常的index.html）：

1. Include breadcrumbs.js in your main HTML template (usually index.html):

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

包含 services.breadcrumbs 作为你的主应用模块依赖性：

Include services.breadcrumbs as a module dependency for your main app:

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

最后，确保你真正注入面包服务到您的控制器，然后将其连接到$范围：

Finally, make sure you actually inject the breadcrumbs service into your controller, and then attach it to $scope:

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

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

您可以看到步骤2和3中的角应用项目的实施<一个href=\"https://github.com/angular-app/angular-app/blob/5d8f8d0af623b62dd75baae291bc530525041d1a/client/src/app/app.js\">in在app.js文件（参考线6条，60和62）。

You can see the implementation of Steps 2 and 3 in the angular-app project in the app.js file (refer to lines 6, 60, and 62).

这篇关于在角面包屑的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！