0

我正在使用 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>
    .....

但这不起作用。有任何想法吗？谢谢。

4

2 回答 2

0

最重要的部分是，如果标签上还没有指令ng-app，则将其移动到标签上。<html>

因此所有的html页面都被angular覆盖。

例如：

<html ng-app="app">

  ...

</html>

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

于 2015-07-16T04:03:50.007 回答
0

您应该使用 ui-router。body在这种情况下，您可以在or元素上添加顶级控制器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>
于 2015-07-16T04:36:06.033 回答