Angular 面包屑在页面刷新时不起作用（ng-route）

Question

过去几周我一直在学习 Angular，我刚刚实现了面包屑服务，但是当我刷新页面时，或者当我第一次导航到面包屑页面时，它不起作用存在于。如果我 return 到主页然后返回到关于页面，面包屑会按预期工作。

请查看其当前状态this live example。

我相信这可能是我加入面包屑的方式，我不知道此类活动背后的规则。

关于页面有一个 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 事件，但是一旦 breadcrumbs 服务初始化，这个 "listener" 就会激活，这发生在您导航到“关于”页面之后一次。

所以我建议您将 $rootScope.$on('$routeChangeSuccess', ... ) 放在应用程序启动时运行的位置（例如 app.run(function($rootScope)) { ... }），然后添加到 breadcrumb 服务一个 setBreadcrumbs() 函数，它将在 $routeChangeSuccess 侦听器 (breadcrumbs.setBreadcrumbs(result)) 中调用。 Here 是我建议的工作版本。

Angular 面包屑在页面刷新时不起作用（ng-route）

Angular breadcrumb not working on page refresh (ng-route)

breadcrumbs

angularjs

angularjs-ng-include

ngroute