Как манипулировать <title> одностраничного приложения AngularJS?

У меня одностраничное приложение AngularJS. Файл index.html выглядит следующим образом:Как манипулировать <title> одностраничного приложения AngularJS?

<html ng-app="myApp" ng-controller="MyCtrl as myctrl"> 
    <head> 
    <link rel="stylesheet" href="my-style-sheet.css"> 
    <title>{{myctrl.title}}</title> 
    </head> 
    <body> 
    <div class="container"> 
     <ol> 
     <li><a ui-sref="stateA">StateA</a></li> 
     <li><a ui-sref="stateB">StateB</a></li> 
     </ol> 
     <div ui-view></div> 
    </div> 
    <script src="my-app.js"></script> 
    </body> 
</html>

Когда пользователь щелкает по ссылкам StateA или StateB, страница отображает содержимое этих страниц вместо <div ui-view></div>. Потрясающе.

По мере того, как пользователь нажимает, отображаемое содержимое изменяется. Мне также нужно изменить название страницы. В настоящее время он получает название от контроллера MyCtrl вот так: <title>{{myctrl.title}}</title>. Но когда пользователь нажимает эти ссылки, эти состояния имеют свои собственные контроллеры. Поэтому я не могу использовать <title>{{myctrl.title}}</title>.

Как обновить заголовок, когда в разных штатах пользователь нажимает на разные контроллеры?

источник

2016-11-04 Saqib Ali

проверки это http://stackoverflow.com/questions/23813599/set-page-title-using-ui-router –

Вы можете прикрепить некоторые данные к каждому состоянию ваших маршрутов, например, значение, которое можно использовать для установки названия страницы.

.state('test', { 
    url: '/test', 
    templateUrl: '/templates/test.html', 
    data: { 
     title: 'test title' 
    } 
})

Затем напишите директиву, чтобы прочитать заголовок. Вы можете проверить, доступны ли требуемые данные в состоянии, в котором вы собираетесь, и приложить все это к событию $stateChangeSuccess.

function dynamicTitle($rootScope, $timeout) { 
    return { 
     link: function(scope, el) { 
      $rootScope.$on('$stateChangeSuccess', function(event, toState) { 
       var title = (toState.data && toState.data.title) 
        ? toState.data.title 
        : 'Default title'; 
       $timeout(function() { 
        el.text(title); 
       }, 0, false); 
      };); 
     } 
    }; 
} 

angular.module('myApp').directive('dynamicTitle', dynamicTitle);

И прикрепить его к <title>

<title dynamic-title></title>

источник

2016-11-04 04:45:28

Вы можете создать AngularJS завод, вводить его, изменить его по телефону 'Title.setTitle()' от контроллеров

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

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

источник

2016-11-04 04:54:11

Как манипулировать <title> одностраничного приложения AngularJS?

ответ

Смежные вопросы