Угловая сухаря не работает на обновлении страницы (ng-route)

Question

Я изучаю Angular в течение последних нескольких недель, и я только что реализовал сервис панировочных сундуков, но он не работает, когда я обновляю страницу или когда я впервые перейдите на страницу, где есть панировочные сухари. Если я вернусь на домашнюю страницу, а затем вернусь к странице about, крохи будут работать по назначению.

См. 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, что происходит после однократного перехода на страницу «О странице».

Так что я хотел бы предложить вам, чтобы разместить $rootScope.$on('$routeChangeSuccess', ...) на месте, где он будет работать от запуска приложения (например, в app.run(function($rootScope)) { ... }), и добавить к breadcrumb службы в setBreadcrumbs() функцию, которая будет вызываться внутри $routeChangeSuccess слушателя (breadcrumbs.setBreadcrumbs(result)). Here - рабочая версия того, что я предлагаю.