Question

  <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中显示。但它存在于数组中。我试图打印并评论。它显示了nodeName。但不是锚标签。请有人帮帮我......

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

现在您已经在breadcrumb中有了一些布局，您可以从状态控制器中调用它来控制应用程序的视图。您首先将其设置为依赖项。

'$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'
        }
      })

您可以为应用中的每个州设置路由状态。这种方式结合了大量的模块化架构，您的面包屑非常独立：）

希望它有所帮助。

未在视图中获取面包屑名称

1 个答案: