基于事件的自定义解决方案

Question

我使用ng-view包含AngularJS部分视图，我想根据包含的视图更新页面标题和h1标题标记。这些超出了部分视图控制器的范围，因此我无法弄清楚如何将它们绑定到控制器中的数据集。

如果它是ASP.NET MVC你可以使用@ViewBag来做到这一点，但我不知道AngularJS中的等价物。我搜索过共享服务，事件等但仍无法使其正常工作。任何方式来修改我的例子，所以它的工作将非常感激。

我的HTML：

<html data-ng-app="myModule">
<head>
<!-- include js files -->
<title><!-- should changed when ng-view changes --></title>
</head>
<body>
<h1><!-- should changed when ng-view changes --></h1>

<div data-ng-view></div>

</body>
</html>

我的JavaScript：

var myModule = angular.module('myModule', []);
myModule.config(['$routeProvider', function($routeProvider) {
    $routeProvider.
        when('/test1', {templateUrl: 'test1.html', controller: Test1Ctrl}).
        when('/test2', {templateUrl: 'test2.html', controller: Test2Ctrl}).
        otherwise({redirectTo: '/test1'});
}]);

function Test1Ctrl($scope, $http) { $scope.header = "Test 1"; 
                                  /* ^ how can I put this in title and h1 */ }
function Test2Ctrl($scope, $http) { $scope.header = "Test 2"; }

Answer 1

如果您正在使用路由，我刚刚发现了一种设置页面标题的好方法：

JavaScript的：

var myApp = angular.module('myApp', ['ngResource'])

myApp.config(
    ['$routeProvider', function($routeProvider) {
        $routeProvider.when('/', {
            title: 'Home',
            templateUrl: '/Assets/Views/Home.html',
            controller: 'HomeController'
        });
        $routeProvider.when('/Product/:id', {
            title: 'Product',
            templateUrl: '/Assets/Views/Product.html',
            controller: 'ProductController'
        });
    }]);

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

HTML：

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

修改：使用ng-bind属性而不是curlies {{}}，因此它们不会在加载时显示

Answer 2

您可以在<html>级别定义控制器。

 <html ng-app="app" ng-controller="titleCtrl">
   <head>
     <title>{{ Page.title() }}</title>
 ...

您可以创建服务：Page并从控制器进行修改。

myModule.factory('Page', function() {
   var title = 'default';
   return {
     title: function() { return title; },
     setTitle: function(newTitle) { title = newTitle }
   };
});

从控制器中注入Page并调用'Page.setTitle（）'。

以下是具体示例：http://plnkr.co/edit/0e7T6l

Answer 3

请注意，您也可以使用javascript直接设置标题，即

$window.document.title = someTitleYouCreated;

这没有数据绑定，但将ng-app标记中的<html>置于有问题时就足够了。（例如，使用JSP模板，其中<head>只在一个地方定义，但您有多个应用程序。）

Answer 4

在ng-app元素上声明html可为head和body提供根范围。

因此，在您的控制器中注入$rootScope并在此处设置标题属性：

function Test1Ctrl($rootScope, $scope, $http) { $rootScope.header = "Test 1"; }

function Test2Ctrl($rootScope, $scope, $http) { $rootScope.header = "Test 2"; }

并在您的信息页中：

<title ng-bind="header"></title>

Answer 5

模块angularjs-viewhead显示了一种机制，可以仅使用自定义指令在每个视图的基础上设置标题。

它可以应用于内容已经是视图标题的现有视图元素：

<h2 view-title>About This Site</h2>

...或者它可以用作独立元素，在这种情况下，元素在渲染文档中是不可见的，并且仅用于设置视图标题：

<view-title>About This Site</view-title>

该指令的内容在根作用域中以viewTitle形式提供，因此它可以像任何其他变量一样用在title元素上：

<title ng-bind-template="{{viewTitle}} - My Site">My Site</title>

它也可以在任何其他可以“看到”根范围的地方使用。例如：

<h1>{{viewTitle}}</h1>

此解决方案允许通过用于控制演示文稿其余部分的相同机制设置标题：AngularJS模板。这避免了使用这种表示逻辑使控制器混乱的需要。控制器需要提供将用于通知标题的任何数据，但模板最终确定如何呈现它，并且可以使用表达式插值和过滤器绑定到范围数据正常。

（免责声明：我是本单元的作者，但我在这里引用它只是为了帮助其他人解决这个问题。）

Answer 6

这是一个适合我的解决方案，它不需要将$ rootScope注入控制器来设置特定于资源的页面标题。

在主模板中：

<html data-ng-app="myApp">
    <head>
    <title data-ng-bind="page.title"></title>
    ...

在路由配置中：

$routeProvider.when('/products', {
    title: 'Products',
    templateUrl: '/partials/products.list.html',
    controller: 'ProductsController'
});

$routeProvider.when('/products/:id', {
    templateUrl: '/partials/products.detail.html',
    controller: 'ProductController'
});

在跑步区：

myApp.run(['$rootScope', function($rootScope) {
    $rootScope.page = {
        setTitle: function(title) {
            this.title = title + ' | Site Name';
        }
    }

    $rootScope.$on('$routeChangeSuccess', function(event, current, previous) {
        $rootScope.page.setTitle(current.$$route.title || 'Default Title');
    });
}]);

最后在控制器中：

function ProductController($scope) {
    //Load product or use resolve in routing
    $scope.page.setTitle($scope.product.name);
}

Answer 7

如果您事先知道标题，那么jkoreska的解决方案是完美的，但您可能需要根据从资源等获得的数据来设置标题。

我的解决方案需要一项服务。由于rootScope是所有DOM元素的基础，因此我们不需要像所提到的那样将控制器放在html元素上

Page.js

app.service('Page', function($rootScope){
    return {
        setTitle: function(title){
            $rootScope.title = title;
        }
    }
});

index.jade

doctype html
html(ng-app='app')
head
    title(ng-bind='title')
// ...

需要更改标题的所有控制器

app.controller('SomeController', function(Page){
    Page.setTitle("Some Title");
});

Answer 8

一种允许动态设置标题或元描述的简洁方法。在示例中，我使用ui-router，但您可以以相同的方式使用ngRoute。

var myApp = angular.module('myApp', ['ui.router'])

myApp.config(
    ['$stateProvider', function($stateProvider) {
        $stateProvider.state('product', {
            url: '/product/{id}',
            templateUrl: 'views/product.html',
            resolve: {
                meta: ['$rootScope', '$stateParams', function ($rootScope, $stateParams) {
                    var title = "Product " + $stateParams.id,
                        description = "Product " + $stateParams.id;
                    $rootScope.meta = {title: title, description: description};
                }]

                // Or using server side title and description
                meta: ['$rootScope', '$stateParams', '$http', function ($rootScope, $stateParams, $http) {
                    return $http({method: 'GET', url: 'api/product/ + $stateParams.id'})
                        .then (function (product) {
                            $rootScope.meta = {title: product.title, description: product.description};
                        });
                }]

            }
            controller: 'ProductController'
        });
    }]);

HTML：

<!DOCTYPE html>
<html ng-app="myApp">
<head>
    <title ng-bind="meta.title + ' | My App'">myApp</title>
...

Answer 9

或者，如果您使用ui-router：

<强>的index.html

<!DOCTYPE html>
<html ng-app="myApp">
<head>
    <title ng-bind="$state.current.data.title || 'App'">App</title>

<强>路由

$stateProvider
  .state('home', {
      url: '/',
      templateUrl: 'views/home.html',
      data: {
        title: 'Welcome Home.'
      }
  }

Answer 10

基于事件的自定义解决方案

这是另一种方法，在这里没有被其他人提及（截至撰写本文时）。

您可以使用以下自定义事件：

// your index.html template
<html ng-app="app">
<head>
<title ng-bind="pageTitle">My App</title>

// your main app controller that is declared on the <html> element
app.controller('AppController', function($scope) {
    $scope.$on('title-updated', function(newTitle) {
        $scope.pageTitle = newTitle;
    });
});

// some controller somewhere deep inside your app
mySubmodule.controller('SomeController', function($scope, dynamicService) {
    $scope.$emit('title-updated', dynamicService.title);
});

这种方法的优点是不需要编写额外的服务，然后将其注入每个需要设置标题的控制器，也不会使用$rootScope。它还允许您设置动态标题（如代码示例中所示），这在路由器的配置对象上使用自定义数据属性是不可能的（据我所知，至少）。

Answer 11

如果您无法控制title元素（如asp.net Web表单），可以使用

var app = angular.module("myApp")
    .config(function ($routeProvider) {
                $routeProvider.when('/', {
                                            title: 'My Page Title',
                                            controller: 'MyController',
                                            templateUrl: 'view/myView.html'
                                        })
                            .otherwise({ redirectTo: '/' });
    })
    .run(function ($rootScope) {
        $rootScope.$on("$routeChangeSuccess", function (event, currentRoute, previousRoute) {
            document.title = currentRoute.title;
        });
    });

Answer 12

使用$rootScope简单而肮脏的方式：

<html ng-app="project">
<head>
<title ng-bind="title">Placeholder title</title>

在您的控制器中，当您拥有创建标题所需的数据时，请执行以下操作：

$rootScope.title = 'Page X'

Answer 13

对于没有包含title标记的ngApp的方案，只需将服务注入需要设置窗口标题的控制器。

var app = angular.module('MyApp', []);

app.controller('MyController', function($scope, SomeService, Title){
    var serviceData = SomeService.get();
    Title.set("Title of the page about " + serviceData.firstname);
});

app.factory('SomeService', function ($window) {
    return {
        get: function(){
            return { firstname : "Joe" };
        }
    };
});

app.factory('Title', function ($window) {
    return {
        set: function(val){
            $window.document.title = val;
        }
    };
});

工作示例...... http://jsfiddle.net/8m379/1/

Answer 14

这些答案似乎都不够直观，所以我创建了一个小指令来做到这一点。这种方式允许您在页面中声明标题，通常会在其中进行标记，并允许它也是动态的。

angular.module('myModule').directive('pageTitle', function() {
    return {
        restrict: 'EA',
        link: function($scope, $element) {
            var el = $element[0];
            el.hidden = true; // So the text not actually visible on the page

            var text = function() {
                return el.innerHTML;
            };
            var setTitle = function(title) {
                document.title = title;
            };
            $scope.$watch(text, setTitle);
        }
    };
});

您当然需要更改模块名称以匹配您的模块名称。

要使用它，只需将其放在您的视图中，就像对常规<title>标记一样：

<page-title>{{titleText}}</page-title>

如果您不需要动态，也可以包含纯文本：

<page-title>Subpage X</page-title>

或者，您可以使用属性，使其更适合IE：

<div page-title>Title: {{titleText}}</div>

您可以在标记中添加所需的任何文本，包括Angular代码。在此示例中，它将在自定义标题标记当前所在的控制器中查找$scope.titleText。

请确保您的网页上没有多个网页标题标签，否则他们会相互冲突。

这里的Plunker示例http://plnkr.co/edit/nK63te7BSbCxLeZ2ADHV。您必须下载zip并在本地运行它才能看到标题更改。

Answer 15

这是一种不同的标题更改方式。也许不像工厂功能那样可扩展（可以想象处理无限页面），但我更容易理解：

在我的index.html中，我开始这样：

    <!DOCTYPE html>
      <html ng-app="app">
        <head>
          <title ng-bind-template="{{title}}">Generic Title That You'll Never See</title>

然后我做了一个名为“nav.html”的部分：

<div ng-init="$root.title = 'Welcome'">
    <ul class="unstyled">
        <li><a href="#/login" ng-click="$root.title = 'Login'">Login</a></li>
        <li><a href="#/home" ng-click="$root.title = 'Home'">Home</a></li>
        <li><a href="#/admin" ng-click="$root.title = 'Admin'">Admin</a></li>
        <li><a href="#/critters" ng-click="$root.title = 'Crispy'">Critters</a></li>
    </ul>
</div>

然后我回到“index.html”并使用ng-include和ng-view为我的部分添加了nav.html：

<body class="ng-cloak" ng-controller="MainCtrl">
    <div ng-include="'partials/nav.html'"></div>
    <div>
        <div ng-view></div>
    </div>

请注意ng-cloak？它与这个答案没有任何关系，但它隐藏了页面，直到它完成加载，一个很好的接触:)了解如何：Angularjs - ng-cloak/ng-show elements blink

这是基本模块。我把它放在一个名为“app.js”的文件中：

(function () {
    'use strict';
    var app = angular.module("app", ["ngResource"]);

    app.config(function ($routeProvider) {
        // configure routes
        $routeProvider.when("/", {
            templateUrl: "partials/home.html",
            controller:"MainCtrl"
        })
            .when("/home", {
            templateUrl: "partials/home.html",
            controller:"MainCtrl"
        })
            .when("/login", {
            templateUrl:"partials/login.html",
            controller:"LoginCtrl"
        })
            .when("/admin", {
            templateUrl:"partials/admin.html",
            controller:"AdminCtrl"
        })
            .when("/critters", {
            templateUrl:"partials/critters.html",
            controller:"CritterCtrl"
        })
            .when("/critters/:id", {
            templateUrl:"partials/critter-detail.html",
            controller:"CritterDetailCtrl"
        })
            .otherwise({redirectTo:"/home"});
    });

}());

如果你看看模块的末尾，你会看到我有一个基于：id的生物详情页面。这是Crispy Critters页面中使用的部分内容。 [Corny，我知道 - 也许它是一个庆祝各种鸡块的网站;）无论如何，你可以在用户点击任何链接时更新标题，所以在我的主要Crispy Critters页面中，这将导致生物细节页面，这就是$ root.title更新的地方，就像你在上面的nav.html中看到的那样：

<a href="#/critters/1" ng-click="$root.title = 'Critter 1'">Critter 1</a>
<a href="#/critters/2" ng-click="$root.title = 'Critter 2'">Critter 2</a>
<a href="#/critters/3" ng-click="$root.title = 'Critter 3'">Critter 3</a>

抱歉这么大风，但我更喜欢一个提供足够细节的帖子来启动和运行。请注意，AngularJS文档中的示例页面已过期，并显示了ng-bind-template的0.9版本。你可以看到它并没有太大的不同。

事后的想法：你知道这一点，但对其他任何人来说都是如此;在index.html的底部，必须包含带有模块的app.js：

        <!-- APP -->
        <script type="text/javascript" src="js/app.js"></script>
    </body>
</html>

Answer 16

angular-ui-router的简单解决方案：

HTML：

<html ng-app="myApp">
  <head>
     <title ng-bind="title"></title>
     .....
     .....  
  </head>
</html>

App.js＆gt; myApp.config块

$stateProvider
    .state("home", {
        title: "My app title this will be binded in html title",
        url: "/home",
        templateUrl: "/home.html",
        controller: "homeCtrl"
    })

App.js＆gt; myApp.run

myApp.run(['$rootScope','$state', function($rootScope,$state) {
   $rootScope.$on('$stateChangeSuccess', function (event, toState, toParams, fromState, fromParams) {
    $rootScope.title = $state.current.title;
    console.log($state);
   });
}]);

Answer 17

当我必须解决这个问题时，我无法将ng-app放在网页的html标记上，所以我用服务解决了这个问题：

angular.module('myapp.common').factory('pageInfo', function ($document) {

    // Public API
    return {
        // Set page <title> tag. Both parameters are optional.
        setTitle: function (title, hideTextLogo) {
            var defaultTitle = "My App - and my app's cool tagline";
            var newTitle = (title ? title : defaultTitle) + (hideTextLogo ? '' : ' - My App')
            $document[0].title = newTitle;
        }
    };

});

Answer 18

基于自定义事件的解决方案受Michael Bromley

启发

我无法使用$ scope工作，所以我尝试使用rootScope，可能会更脏一些......（特别是如果你在没有注册事件的页面上刷新）< / p>

但我真的很喜欢事物松散耦合的想法。

我使用angularjs 1.6.9

<强> index.run.js

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

function runBlock($rootScope, ...)
{
  $rootScope.$on('title-updated', function(event, newTitle) {
    $rootScope.pageTitle = 'MyApp | ' + newTitle;
  });
}

<强> anyController.controller.js

angular
.module('myApp')
.controller('MainController', MainController);

function MainController($rootScope, ...)
{
  //simple way :
  $rootScope.$emit('title-updated', 'my new title');

  // with data from rest call
  TroncQueteurResource.get({id:tronc_queteur_id}).$promise.then(function(tronc_queteur){
  vm.current.tronc_queteur = tronc_queteur;

  $rootScope.$emit('title-updated', moment().format('YYYY-MM-DD') + ' - Tronc '+vm.current.tronc_queteur.id+' - ' +
                                             vm.current.tronc_queteur.point_quete.name + ' - '+
                                             vm.current.tronc_queteur.queteur.first_name +' '+vm.current.tronc_queteur.queteur.last_name
  );
 });

 ....}

<强>的index.html

<!doctype html>
<html ng-app="myApp">
  <head>
    <meta charset="utf-8">
    <title ng-bind="pageTitle">My App</title>

它为我工作:)）

Answer 19

虽然其他人可能有更好的方法，但我能够在我的控制器中使用$ rootScope，因为我的每个视图/模板都有一个独特的控制器。您需要在每个控制器中注入$ rootScope。虽然这可能不太理想，但它对我有用，所以我想我应该把它传递给它。如果您检查页面，它会将ng-binding添加到标题标记。

示例控制器：

myapp.controller('loginPage', ['$scope', '$rootScope', function ($scope, $rootScope) {

// Dynamic Page Title and Description
$rootScope.pageTitle = 'Login to Vote';
$rootScope.pageDescription = 'This page requires you to login';
}]);

示例Index.html标题：

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<meta name="description" content="{{pageDescription}}">
<meta name="author" content="">
<link rel="shortcut icon" href="../../assets/ico/favicon.ico">
<base href="/">
<title>{{pageTitle}}</title>

您还可以将pageTitle和pageDescription设置为动态值，例如从REST调用返回数据：

    $scope.article = restCallSingleArticle.get({ articleID: $routeParams.articleID }, function() {
    // Dynamic Page Title and Description
    $rootScope.pageTitle = $scope.article.articletitle;
    $rootScope.pageDescription = $scope.article.articledescription;
});

同样，其他人可能对如何处理此问题有更好的想法，但由于我正在使用预渲染，我的需求正在得到满足。

Answer 20

Mr Hash到目前为止得到了最好的答案，但下面的解决方案通过添加以下好处使其成为理想（对我而言）：

不添加任何会减慢速度的手表
实际上自动化了我在控制器中所做的事情，但是
如果我还想要它，仍然可以让我从控制器访问。
无需额外注射

在路由器中：

  .when '/proposals',
    title: 'Proposals',
    templateUrl: 'proposals/index.html'
    controller: 'ProposalListCtrl'
    resolve:
      pageTitle: [ '$rootScope', '$route', ($rootScope, $route) ->
        $rootScope.page.setTitle($route.current.params.filter + ' ' + $route.current.title)
      ]

在跑步区：

.run(['$rootScope', ($rootScope) ->
  $rootScope.page =
    prefix: ''
    body: ' | ' + 'Online Group Consensus Tool'
    brand: ' | ' + 'Spokenvote'
    setTitle: (prefix, body) ->
      @prefix = if prefix then ' ' + prefix.charAt(0).toUpperCase() + prefix.substring(1) else @prifix
      @body = if body then ' | ' + body.charAt(0).toUpperCase() + body.substring(1) else @body
      @title = @prefix + @body + @brand
])

Answer 21

感谢tosh shimayama他的解决方案我认为将服务直接放入$scope并不是那么干净，所以这是我对此的轻微变化：http://plnkr.co/edit/QJbuZZnZEDOBcYrJXWWs

控制器（原来的答案在我看来有点太愚蠢）会创建一个ActionBar对象，而这个对象被填充到$ scope中。
该对象负责实际查询服务。它还<$>隐藏来自$ scope的调用来设置模板URL，而其他控制器可以使用它来设置URL。

Answer 22

我发现更好，更动态的解决方案是使用$ watch跟踪变量更改，然后更新标题。

如何根据AngularJS局部视图动态更改标题？

22 个答案:

Page.js

index.jade

需要更改标题的所有控制器

基于事件的自定义解决方案

基于自定义事件的解决方案受Michael Bromley