javascript – 如何使用$routeProvider更改角色中的页面标题

我发现了几个类似的问题,however none of the answers helped.他们似乎都涉及到某些类型的$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',function($rootScope) {
    $rootScope.$on('$routeChangeSuccess',oldVal) {
        if (oldVal !== newVal) {
            document.title = $route.current.title;
        }
    });
}]);

HTML

<!DOCTYPE html>
<html lang="en" ng-app="portalExchange" ng-controller="PortalController as portal">
<head>
    <Meta charset="utf-8">
    <title ng-bind="title">myApp</title>
</head>

解决方法

我做的很简单.在路由配置中,您定义标题：

.when('/dashboard',{
    title : 'My Dashboard',controller  : 'DashboardController'
})

那么你收听$routeChangeSuccess事件,只需设置document.title.在应用程序运行块(为此的最佳位置)：

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

这种方法的好处是它允许你避免一个更加绑定的ng-bind =“title”,这是很好的.

javascript – 如何使用$routeProvider更改角色中的页面标题

解决方法

猜你在找的JavaScript相关文章