Как обновить метаtags в AngularJS?

Я разрабатываю приложение, используя AngularJS. Я хочу обновить метаtags при изменении маршрута.
Как обновить метаtags в AngularJS, которые могут отображаться в «источнике просмотра» на странице?

вот HTML-код –

                 

      Test      

    Я решил эту проблему примерно 2 дня назад, создав службу и используя $ window, а также classический javascript.

    В своей наметке html создайте любые метаtags, которые вам нужны … (не стесняйтесь оставлять их пустыми на данный момент или вы можете установить их по умолчанию).

         

    Тогда нам нужно создать такой сервис.

     angular.module('app').service('MetadataService', ['$window', function($window){ var self = this; self.setMetaTags = function (tagData){ $window.document.getElementsByName('title')[0].content = tagData.title; $window.document.getElementsByName('description')[0].content = tagData.description; }; }]); 

    Теперь нам нужно будет использовать сервис «self.setMetaTags» из controllerа (при инициализации) … вы просто вызовете функцию в любом месте controllerа.

      angular.module('app').controller('TestController', ['MetadataService',function(MetadataService){ MetadataService.setMetaTags({ title: 'this', description: 'works' }); }]); 

    Если вы используете угловой ui-router , вы можете использовать ui-router-metatags .

    Когда вы просматриваете источник в большинстве браузеров, вы видите документ, который был первоначально отправлен с сервера перед любым манипулятором JavaScript с DOM. Приложения AngularJS обычно выполняют много манипуляций с DOM, но никогда не меняют оригинальный документ. Когда вы делаете что-то вроде щелчка правой кнопкой мыши -> проверяете элемент в FireFox или Chrome (с помощью инструментов dev), вы увидите рендер DOM, который включает все обновления JavaScript.

    Итак, чтобы ответить на ваш вопрос, нет возможности обновить метатег описания с помощью JavaScript, чтобы изменения отражались в «источнике просмотра». Тем не менее, вы можете обновить тег описания метаданных, чтобы все браузерные плагины (например, приложения для заметок и т. Д.) Увидели обновленное описание. Для этого вы сделали бы что-то вроде этого:

    var metaDesc = angular.element($rootElement.find('meta[name=description]')[0]); metaDesc.attr('content', description);

    Я изменил ответ, найденный здесь, чтобы сделать эту работу на моем сайте. Вы устанавливаете мета-контент в конфигурации маршрута, а затем привязываете функцию к событию $ routeChangeSuccess, чтобы поместить сконфигурированное значение в $ rootScope. Пока ваш метатег связан с значением $ rootScope, все будет работать так, как планировалось.

     angularApp.run(['$rootScope', function ($rootScope) { $rootScope.$on('$routeChangeSuccess', function (event, current, previous) { $rootScope.title = current.$$route.title; $rootScope.description = current.$$route.description; $rootScope.keywords = current.$$route.keywords; }); }]); angularApp.config(function ($routeProvider, $locationProvider) { $routeProvider .when('/About', { templateUrl: 'Features/About/About.html', title: 'Here\'s the Title', description: 'A Nice Description', keywords: 'Some, Keywords, Go, Here' }); // use the HTML5 History API $locationProvider.html5Mode(true); $locationProvider.hashPrefix('!'); });       A Placeholder Title   @Styles.Render("~/Content/css")  
    Interesting Posts

    Мастер настройки печати Windows 7 поворачивает несколько фотографий с портрета на пейзаж, как остановить это?

    Как использовать модели с QML?

    Почему я не могу преобразовать ‘char **’ в ‘const char * const *’ в C?

    Как освободить память в Mac OS X?

    Панель управления Java не показывает вкладку «Обновление» в Windows 7 x64

    Разрешить определенное разрешение пользователя для чтения / записи моей папки

    Поиск аргументов командной строки

    Написание текстового файла на SD-карту не удается

    Частный байт VS Рабочий набор в Process Explorer

    Что такое маршрутизатор? Что такое переключатель? И что такое хаб?

    Создание .xz с 7-Zip, требует недостаточной памяти (не верно)

    Ошибка HTTP 500.19 и код ошибки: 0x80070021

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

    В чем разница между планшетами и коммутационной панелью в RxJava?

    gcc / g ++ для размещения всех объектных файлов в отдельном каталоге

    Давайте будем гением компьютера.