在面包屑中显示当前类别名称（使用 angularJS）

Question

我正在努力让我的类别和供应商名称在面包屑上可见。我正在使用 ng-breadcrumbs 模块 (https://github.com/ianwalter/ng-breadcrumbs)。

我想我在使 curCategory 和 curVendor 全局可访问时遇到了问题，但尝试了一些方法但无法使其工作。

这是我的 html：

<body ng-controller="mainController as main">
(...)
<ol class="breadcrumb">
 <li ng-repeat="breadcrumb in breadcrumbs.get({'Category':curCategory,'Vendor': curVendor}) track by breadcrumb.path" ng-class="{ active: $last }">
  <a ng-if="!$last" ng-href="#{{ breadcrumb.path }}" ng-bind="breadcrumb.label" class="margin-right-xs"></a>
  <span ng-if="$last" ng-bind="breadcrumb.label"></span>
 </li>
</ol>

我的路线：

app.config(['$routeProvider',
  function($routeProvider) {
    $routeProvider.
      when('/', {
        templateUrl: 'templates/pages/main.html',
        label: 'Home'
      }).
      when('/:cat', {
        templateUrl: 'templates/pages/category.html',
        label: 'Category'
      }).
      when('/:cat/:ven', {
        templateUrl: 'templates/pages/vendor.html',
        label: 'Vendor'
      }).
      otherwise({
        redirectTo: '/'
      });
  }]);

我的控制器：

var app = angular.module("myApp", [
  'ngRoute', 
  'ng-breadcrumbs'
]);

app.controller('mainController', function($scope, $routeParams, breadcrumbs) {

  $scope.breadcrumbs = breadcrumbs;

  $scope.curCategory = $routeParams.cat;
  $scope.curVendor = $routeParams.ven;

  (...)

});

Answer 1

嗯，我发现哪里不对了！

令我惊讶的是，在特定的控制器中它工作正常，但是当我将它移到 mainController 时它从 $routeParams 返回空对象。

解决方法如下：

$scope.$on('$routeChangeSuccess', function() {
  $scope.curCategory = $routeParams.cat;
  $scope.curVendor = $routeParams.ven;
});

它只是在填充 $routeParams 之前分配了变量。

在面包屑中显示当前类别名称（使用 angularJS）

Display current category name in breadcrumbs (using angularJS)

javascript

breadcrumbs

angularjs