视图中未显示面包屑名称答案

【问题标题】：Not getting breadcrumb name in view视图中未显示面包屑名称
【发布时间】：2015-12-17 06:27:09
【问题描述】：

  <td><i class="dataentry-breadcrumb" /></td>
    <!-- {{breadcrumb.length}} {{breadcrumb[0].nodeName}} -->
    <td ng-repeat="breadCrumbObj in breadcrumb">
    <i class="dataentry-breadcrumbArrow" />
    <a class="dataentry-breadcrumbElement" href='#'
        title="{{breadCrumbObj.nodeName}}"
        ng-click=updateBreadCrumb(breadCrumbObj.level)>{{breadCrumbObj.nodeName}}</a>
    </td>

在上面的代码中，锚标记中的 nodeName 没有在 UI 中显示。但它存在于数组中。我试图打印它并发表评论。它显示节点名称。但不在锚标签中。请任何人帮助我...

【问题讨论】：

标签： angularjs breadcrumbs

【解决方案1】：

我将展示我是如何做到的，因为它看起来更合乎逻辑且更抽象，因此您可以更好地控制正在显示的视图。

首先，您将它放在显示它的基本 html 文件中。像这样的：

<div ncy-breadcrumb></div>

现在这允许您为面包屑创建一个独立的元素，所以现在我们基本上有一个自定义指令，在breadcrumb.html 中，您可以使用类似的东西对其进行建模，同样主要是 html。

<div class="breadcrumb">
    <span ng-repeat="step in steps | limitTo:(steps.length-1)">
        <a class="btn btn-tab" href="{{step.ncyBreadcrumbLink}}">{{step.ncyBreadcrumbLabel}}</a>
        <span class="btn btn-tab btn-tab-divider">&gt;</span>
    </span>
    <span ng-repeat="step in steps | limitTo:-1">
        <span class="btn btn-tab btn-current">{{step.ncyBreadcrumbLabel}}</span>
    </span>
</div>

既然您在面包屑中有一些布局，您可以从控制应用视图的状态控制器调用它。您首先将其设置为依赖项。

'$breadcrumbProvider', function($breadcrumbProvider, ..) {

在函数内配置

// configure breadcrump
    $breadcrumbProvider.setOptions({
      templateUrl: 'scripts/nav/breadcrump.html'
    });

除了剩下要做的事情之外，根据您在应用程序中的位置命名您如何称呼它。像这样：

.state('root.vacancy', {
        url: '/vacancies/:id',
        shouldHighlight: 'home',
        views: {
          'main-content@root': {
            templateUrl: 'scripts/vacancies/vacancy.html',
            controller: 'VacancyController',
            resolve: {
              vacancy: function(vacancyService, $stateParams) {
                return vacancyService.getVacancy($stateParams.id);
              }
            }
          }
        },
        ncyBreadcrumb: {
          label: "{{newProfile.vacancyTitle}}",
          parent: 'root.home'
        }
      })

您为应用中的每个状态设置路由状态。这样一来，大量的模块化架构被合并，你的面包屑非常独立:)

希望对您有所帮助。

【讨论】：