使用AngularJS路由更改页面标题

11 浏览
0 Comments

使用AngularJS路由更改页面标题

我想使用路由来更改我的页面标题，目前我的标题已经改变，但我的URL被追加到标题中。知道是为什么吗？

index.html:

网站名称

JS文件：

app.config(function($stateProvider,$urlRouterProvider) {
         .state('dashboard', {
            url: "/dashboard",
            templateUrl: "partials/content/dashboard.html",
            controller: "dashboardCtrl"
         })
 });
app.run(function ($rootScope, $state, $stateParams) {   
         //在这里设置
     $rootScope.title = $state.current.title;        
});

0

3 答案

0 Comments

使用AngularJS路由时，有时需要更改页面的标题。上面的代码片段展示了如何在路由状态中设置页面标题。在这个例子中，状态名为"dashboard"，当进入该状态时，页面的标题将被设置为"Dashboard title"。

出现这个问题的原因是需要在AngularJS应用中使用路由，并希望能够动态更改页面标题。解决方法是在路由状态中设置一个"data"属性，并将页面标题作为其值。然后，可以在应用的其他地方使用$state.current.data.title来获取页面标题，并将其赋值给$rootScope.title，以便在页面中显示。

通过将上述代码整理为一篇文章，我们可以得到如下内容：

使用AngularJS路由时，有时需要更改页面的标题。下面的代码展示了如何在路由状态中设置页面标题并将其显示在页面中。

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

在上述代码中，我们可以看到在路由状态"dashboard"中设置了一个"data"属性，并将页面标题作为其值。这样，当进入"dashboard"状态时，页面的标题将被设置为"Dashboard title"。

为了在页面中显示页面标题，我们需要在应用的其他地方获取该值并将其赋值给$rootScope.title。可以通过使用$state.current.data.title来获取页面标题，并将其赋值给$rootScope.title。

$rootScope.title = $state.current.data.title;

通过以上步骤，我们就能够在使用AngularJS路由的应用中动态更改页面标题了。

希望本文对你有所帮助！

0
0 Comments

使用AngularJS的路由模块（$routeProvider）时，需要使用when函数的title属性来设置页面的标题。代码示例如下：

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或视图中访问title属性，可以获取页面的标题。示例代码如下：

以上就是使用AngularJS路由时设置页面标题的方法。

0
0 Comments

使用$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

你能详细解释一下你是如何实现的吗？

我在我的控制器中简单地使用了这个$rootScope.title = 'my title';和你提到的相同的HTML。

0