Javascript 如何使用$routeProvider在Angular中更改页面标题

我发现了几个类似的问题。它们似乎都涉及某种类型的

$location

依赖项，我无法正确地注入这些依赖项

我的代码如下：

(function() {

    // App dependencies
    var app = angular.module('portalExchange',
                        ['ngRoute',
                         'app-products',
                         'app-manage',
                         'app-profile']);

    // [ Main Controller ] : PortalController
    app.controller('PortalController', function($scope) {
        if ($('.top_link_dashboard').hasClass('unactive_top')) {
            $('.top_link_dashboard').removeClass('unactive_top');
            $('.top_link_dashboard').addClass('active_top');
        }
    });

    // Controller for Dashboard
    app.controller('DashboardController', function() {
    });

    // Controller for Developers
    app.controller('DevelopersController', function($scope) {
        // Page.setTitle('Developers');
    });

    // Controller for Quote
    app.controller('QuoteController', function($scope) {
        // Page.setTitle('Begin Quote');
    });

    // Directive for Header
    app.directive('appHeader', function () {
        // Type of Directive, E for element, A for Attribute
        // url of a template
        return {
            restrict: 'E',
            templateUrl: 'templates/modules/globals/app-header.html'
        };
    });

    // Directive for Footer
    app.directive('appFooter', function () {
        return {
            restrict: 'E',
            templateUrl: 'templates/modules/globals/app-footer.html',
            controller: function(){
                this.date = Date.now();
            },
            controllerAs:'footer'
        };
    });

    // configure our routes
    app.config(function($routeProvider) {
        $routeProvider

        // route for the dashboard page
        .when('/', {
            templateUrl : 'templates/sections/app-dashboard.html',
            controller  : 'DashboardController'
        })

        // route for the dashboard page
        .when('/dashboard', {
            title : 'My Dashboard',
            templateUrl : 'templates/sections/app-dashboard.html',
            controller  : 'DashboardController'
        })

        // route : Developers Page
        .when('/developers', {
            title : 'For Developers',
            templateUrl : 'templates/sections/app-developers.html',
            controller  : 'DevelopersController'
        })

        // route : Begin Quote
        .when('/quote', {
            title : 'Begin Quote',
            templateUrl : 'templates/sections/app-quote.html',
            controller  : 'QuoteController'
        });
    });

    app.run(['$rootScope', '$route', function($rootScope) {
        $rootScope.$on('$routeChangeSuccess', function(newVal, oldVal) {
            if (oldVal !== newVal) {
                document.title = $route.current.title;
            }
        });
    }]);

})();

RUN函数

app.run(['$rootScope', '$route', function($rootScope) {
    $rootScope.$on('$routeChangeSuccess', function(newVal, oldVal) {
        if (oldVal !== newVal) {
            document.title = $route.current.title;
        }
    });
}]);

HTML

myApp

我的方法很简单。在路线配置中，您定义

标题

：

.when('/dashboard', {
    title : 'My Dashboard',
    templateUrl : 'templates/sections/app-dashboard.html',
    controller  : 'DashboardController'
})

然后收听

$routeChangeSuccess

事件，只需设置

document.title

。在应用程序运行块中（最佳位置）：

---

这种方法的好处是，它允许您避免再绑定一次，这很好。

这有点像主题，但我试图在使用

ui路由器的角度应用程序中管理页面标题，我遇到了几个问题。首先，当然，我必须将
route
和
$routeChangeSuccess
更改为
$state
和
$stateChangeSucces
，其次，在浏览器将上一页标题添加到历史记录之前，我遇到了页面标题更新的问题，因此，我必须向事件处理程序添加超时，从而生成以下代码：

angular.module('myApp').run(appRunFunction);

appRunFunction.$inject = ['$rootScope', '$state', '$timeout'];

function appRunFunction($rootScope, $state, $timeout) {
    $rootScope.$on('$stateChangeSuccess', function() {
        $timeout(function() { document.title = $state.current.title; }, 100);
    });
}

这是另一种方式

app.run(['$rootScope', function($rootScope) {
    $rootScope.$on('$routeChangeSuccess', function(_, current) {
        document.title = current.$$route.title;
    });
}]);

因为有时$route injection会导致问题（例如，在运行单元测试时）。
控制台中出现了什么错误？为什么不在每次位置更改时调用
document.title=$scope.myTitle
行？@Mike完全正确，不需要再绑定一个观察者。很抱歉，仍然存在以下问题：（$root未定义，我不确定是否正确插入了它…多个错误。我正在上载我的最新代码，并将发布一个链接到传感器，当然您还需要插入
$route
服务。查看更新的答案。您需要将
$rootScope
和
$route
服务插入
run
函数，like在我的回答示例中。@dfsq$routeChangeSuccess的签名是（事件、当前路由、previousRoute），那么您的检查（oldValue！==newVal）是否多余，或者我是否遗漏了什么？可能收集函数闭包中的所有三个参数，然后检查（currentRoute！==previousRoute）但是，即使这样似乎也有点多余，因为我们无论如何都会成功。但是，+1是一个简洁的解决方案！
angular.module('myApp').run(appRunFunction);

appRunFunction.$inject = ['$rootScope', '$state', '$timeout'];

function appRunFunction($rootScope, $state, $timeout) {
    $rootScope.$on('$stateChangeSuccess', function() {
        $timeout(function() { document.title = $state.current.title; }, 100);
    });
}

app.run(['$rootScope', function($rootScope) {
    $rootScope.$on('$routeChangeSuccess', function(_, current) {
        document.title = current.$$route.title;
    });
}]);