Question

过去几周我一直在学习Angular，我刚刚实施了面包屑服务，但是当我刷新页面或者第一次导航到页面时，它无法正常工作面包屑存在于。如果我返回主页然后返回about页面，则面包屑按预期工作。

请参阅this live example其当前状态。

我相信这可能是我包括面包屑的方式，而且我不知道这些活动背后的规则。

about页面有一个ng-include，用于抓取面包屑的模板：

<ul id="breadcrumb" ng-controller="crumbCtrl">
  <li><a href="#" title="Home">Home</a></li>
  <li ng-repeat="breadcrumb in breadcrumbs.getAll()">
    <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>

我不希望出于显而易见的原因在主页上显示碎屑，这就是为什么我只将它包含在约页面上。

有人可以告诉我一种方法，我应该只在主页上隐藏它，或者是正确的部署方法。

此外，这是我的主要app.js：

var app = angular.module('dunnApp', ['ngRoute', 'services.breadcrumbs']);

app.config(['$routeProvider', function ($routeProvider) {
  $routeProvider
    // Home
    .when("/", {templateUrl: "partials/home.html", controller: "PageCtrl"})
    // Pages
    .when("/about", {templateUrl: "partials/about.html", controller: "PageCtrl"})

    // else 404
    .otherwise("/404", {templateUrl: "partials/404.html", controller: "PageCtrl"});
}]);


angular.module('dunnApp').controller('crumbCtrl', ['$scope', '$location', '$route', 'breadcrumbs',
  function ($scope, $location, $route, breadcrumbs) {
  $scope.location = $location;
  $scope.breadcrumbs = breadcrumbs;
  console.log("Crumbs online.");
  }]);

app.controller('PageCtrl', function (/* $scope, $location, $http */) {
  console.log("Page Controller online.");


});

Answer 1

以下是您的代码中发生的事情：

breadcrumbs

crumbCtrl服务未初始化当crumbCtrl模板包含在关于页面时，
breadcrumbs开始行动。
在breadcrumbs服务中，您会收听$routeChangeSuccess个事件，但这个＆＃34;听众＆＃34;初始化breadcrumbs服务后会激活，这会在您导航到关于页面一次后发生。

所以我建议你将$rootScope.$on('$routeChangeSuccess', ... )放在应用程序启动的地方（例如app.run(function($rootScope)) { ... }），然后添加到breadcrumb }服务setBreadcrumbs()函数，该函数将在$routeChangeSuccess监听器（breadcrumbs.setBreadcrumbs(result)）内调用。 Here是我建议的工作版本。

Angular breadcrumb无法在页面刷新（ng-route）上工作

1 个答案: