Question

我想使用路由更改页面的页面标题，到目前为止，我的标题已更改，但我的网址已添加到标题中。任何线索为什么？

的index.html：

<title ng-bind-html="title ">Website Name</title>

JS档案

app.config(function($stateProvider,$urlRouterProvider) {
         .state('dashboard', {
            url: "/dashboard",
            templateUrl: "partials/content/dashboard.html",
            controller: "dashboardCtrl"
         })
 });

app.run(function ($rootScope, $state, $stateParams) {   
         //set it here
     $rootScope.title = $state.current.title;        
});

Answer 1

使用$routeChangeSuccess。

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

然后在 Html 中，使用ng-bind

<!DOCTYPE html>
<html ng-app="myApp">
<head>
    <title ng-bind="'myApp &mdash; ' + title">myApp</title>

更多参考阅读 - How to dynamically change header based on AngularJS partial view?或How to set page title with Angular

Answer 2

只需将其放入数据：

app.config(function($stateProvider,$urlRouterProvider) {  
   .state('dashboard', { 
         url: "/dashboard", 
         templateUrl:      "partials/content/dashboard.html",  
         controller: "dashboardCtrl",
         data: {
             title: 'Dashboard title'
          }
 }) });

Answer 3

您需要将title属性用于$routeProvider的when功能，如下所示：

var module = angular.module('yourApp.routes', []);

module.config([
    '$routeProvider', function ($routeProvider) {
         $routeProvider
             .when('/dashboard', {
                 title: 'Dashboard',
                 templateUrl: "partials/content/dashboard.html",
                 controller: "dashboardCtrl"
              })
    }
]);

return module;

可以在$scope或视图中访问标题：

<h1 data-ng-bind="::title"></h1>

使用angularjs路由更改页面的标题

3 个答案: