角度面包屑不工作在页面刷新（ng路由）

问题描述：

过去几个星期我一直在学习Angular，并且我刚刚实现了面包屑服务，但当我刷新页面时，或者当我第一次导航到面包屑存在的页面。如果我回到主页，然后返回到关于页面，则碎屑按预期工作。角度面包屑不工作在页面刷新（ng路由）

请参阅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."); 


});

事件'$ routeChangeSuccess'没有在第一页加载时触发 –

答

这里是你的代码会发生什么：

breadcrumbs服务未初始化直到crumbCtrl被初始化
crumbCtrl进入当breadcrumbs模板被包含到About页面时的动作。
breadcrumbs 服务您收听$routeChangeSuccess事件，但是一旦breadcrumbs服务初始化后，此“听众”就会激活，这会在导航到关于页面一次后发生。

所以我建议你，放置$rootScope.$on('$routeChangeSuccess', ...)上它会从应用程序的启动时运行的地方（例如，在app.run(function($rootScope)) { ... }），并加入到breadcrumb服务setBreadcrumbs()功能，这将在$routeChangeSuccess监听器内部调用（breadcrumbs.setBreadcrumbs(result)）。 Here是我建议的工作版本。

这是非常有意义的，我会记住的。感谢您的帮助，谢谢。 – Aquious

角度面包屑不工作在页面刷新（ng路由）

相关推荐