Question

我需要使用angular动态加载页面标题。这样做的最佳方式是什么？任何想法都可能非常有用。

Answer 1

如果您在身体级别定义控制器，那将非常容易。如果是这种情况，您可以声明并定义范围变量，如pageTitle，并使用它来显示页面标题。比如this

如果没有，并且如果您使用路线根据路线选择控制器，您仍然可以使用rootScope来执行此操作，例如hus shown here。

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(['$location', '$rootScope', function($location, $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>

编辑：

在SO上的

This question有很好的答案，与你正在寻找的类似。

Answer 2

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

在您的控制器内

app.controller("titleCtrl",function($scope){
     $scope.title="hello page";
});

不同页面的第二种方式： -

您可以在关卡中定义控制器。

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

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

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

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

例如： -

app.controller("pageonectrl",funtion($scope,Page){

Page.setTitle("pageone");

});

app.controller("pagetwoctrl",funtion($scope,Page){

Page.setTitle("pagetwo");

});

PS： - 第二个对于实际目的更有效：）

信用： - https://stackoverflow.com/a/12506795/1632286

如何使用angular添加页面标题？

2 个答案: