AngularJS 添加页面标题时遇到问题

Question

我正在使用 AngularJS 编写网络应用程序。它不是单页应用程序，但我的所有代码都在一个文件中 - index.ejs。

所以我对 index.ejs 的设置大致如下所示：

<head>
   <title> Main page </title>
</head>
<body>
   <div class="row">
    <div class="col-md-10 col-md-offset-1">
       <ui-view></ui-view>
     </div>
   </div>

   <script type = "text/ng-template" id = "/main.html">
   .....
   </script>

   <script type = "text/ng-template" id = "/addStuff.html">
   .....
   </script>

   <script type = "text/ng-template" id = "/searchStuff.html">
   .....
   </script>

   <script type = "text/ng-template" id = "/about.html">
   .....
   </script>
</body>

我在 index.ejs 顶部有一个主页标题。我还想为每个页面设置单独的标题，这样当它们在新选项卡中打开时，我知道哪个是哪个。我试过这样做：

<script type = "text/ng-template" id = "/addStuff.html">
    <head>
        <title> Add Stuff </title>
    </head>
    .....

但这行不通。有任何想法吗？谢谢

Answer 1

最重要的部分是将指令 ng-app 移动到 <html> 标签上（如果它还没有在其中的话）。

因此 html 页面全部被 angular 覆盖。

例如：

<html ng-app="app">

  ...

</html>

那就真的是你的选择了。
您可以使用自定义指令来包装标题、生成服务或仅使用 {{ }} 语法。

Answer 2

您应该使用 ui-router。在这种情况下，您可以在 body 或 html 元素上添加顶级控制器，例如 <html ng-app="my-app" ng-controller="AppCtrl">

并在加载新路由时添加一个“$stateChangeSuccess”侦听器...

.controller('AppCtrl', function AppCtrl($scope) {

    $scope.$on('$stateChangeSuccess', function (event, toState, toParams, fromState, fromParams) {
        if (angular.isDefined(toState.data.pageTitle)) {
            $scope.pageTitle = toState.data.pageTitle;
        }
    });
})

然后在路由定义中你可以添加一个名为data.pageTitle

的属性

    $stateProvider.state( 'profile', {
        url: '/profile',
        views: {
            "main": {
                controller: 'ProfileCtrl',
                templateUrl: 'profile/profile.tpl.html'
            }
        },
        data:{ 
           pageTitle: 'Profile' 
        }
    })

然后在你的主index.html文件中，你可以绑定pageTitle属性：

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

AngularJS 添加页面标题时遇到问题

AngularJS trouble adding page titles

html

uiview

angularjs

single-page-application

angularjs-ng-template