Проблема с AngularJS при добавлении заголовков страниц

Я пишу веб-приложение, используя 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>
    .....

Но это не работает. Есть идеи? Благодарю.

Источник

2 ответа

Решение

Вы должны использовать UI-роутер. В этом случае вы можете добавить контроллер верхнего уровня на 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>
Источник

Самая важная часть - вы перемещаете директиву ng-app на <html> отметьте, если это еще не там.

При этом вся html страница покрыта угловым.

Например:

<html ng-app="app">

  ...

</html>

Тогда это действительно твой выбор.
Вы можете использовать пользовательскую директиву, чтобы обернуть заголовок, создать сервис или просто использовать {{ }} синтаксис.

Источник
Другие вопросы по тегам