Question

我正在使用AngularJS编写一个Web应用程序。它不是单页面应用程序，而是我的所有代码都在一个文件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 ng-app="app"> ... </html>。

因此，所有的html页面都被有角度的。

例如：

{{ }}

然后它真的是你的选择您可以使用自定义指令来包装标题，生成服务或仅使用<form action="/user/reg-link" method="POST"> <input type="text" name="txt_un"> <input type="text name="email"> <input type="submit"> </form>语法。

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无法添加页面标题

2 个答案: