Как создать угловую директиву в разделе документа?

Я новичок в angular.js . Я пытаюсь создать директиву, чтобы добавить некоторые заголовки и метаtags в разделе html-документов, но у меня проблемы.

Мой документ index.html выглядит следующим образом:

            

Мой javascript:

 var app = angular.module ('myApp', ['ngRoute']); app.config(['$routeProvider', '$locationProvider', function($routeProvider, $locationProvider) { $routeProvider .when('/', { templateUrl: 'routes/home.html'}) .when('/pageA', { templateUrl: 'routes/pageA.html'}) .when('/pageB', { templateUrl: 'routes/pageB.html'}) .otherwise({ redirectTo: '/' }); $locationProvider.html5Mode({ enabled: true }); }]); app.directive('seoTitle', function() { return { restrict: 'E', template: '{{seo.title}}' }; }); 

Когда я открываю инспектор, директива была перенесена в и не заменена шаблоном:

введите описание изображения здесь

Как создать директивы в заголовке?

PS: Пример кода был бы замечательным!

Ваша директива не должна идти в head чтобы установить заголовок. Просто попросите директиву ввести $window и установите $window.document.title = 'your title' .

ОБНОВЛЕНИЕ. Как вы можете обновлять метаtags.

Для обновления мета-тегов я бы использовал следующую директиву:

 mmMetaTags.$inject = ['metaTags']; function mmMetaTags(metaTags) { return { restrict: 'A', link: function(scope, element) { metaTags.metaTags.forEach(function(tag) { addMetaTag(tag.name, tag.content) }); metaTags.subscribe(addMetaTag); function addMetaTag(name, content) { var tag = element[0].querySelector('meta[name="' + name + '"]'); if (tag) { tag.setAttribute('content', content); } else { element.append(''); } } } } } directive('mmMetaTags', mmMetaTags); 

Наряду с сервисом для установки metaTags:

 function MetaTags() { // private this._tags = []; // private this._subscriber; var self = this; Object.defineProperty(this, 'metaTags', { get: function() { return self._tags; }}); } MetaTags.prototype.addMetaTag = function(name, content) { this._tags.push({ name: name, content: content }); this._updateSubscriber(name, content); } MetaTags.prototype.subscribe = function(callback) { if (!this.subscriber) { this._subscriber = callback; } else { throw new Error('Subscriber already attached. Only one subscriber may be added as there can only be one instance of '); } } // private MetaTags.prototype._updateSubscriber = function(name, content) { this.subscriber(name, content); } service('metaTags', MetaTags); 

Таким образом, в вашем теге head вы должны включить атрибут mm-meta-tags . Затем в вашем controllerе вы должны ввести службу metaTags и вызвать addMetaTag для обновления тегов.

Вы отвечаете здесь: Задайте заголовок страницы, используя UI-Router , реализованный в вашем коде, это может быть:

 < !DOCTYPE html>     doesn't work      

и вы js:

 app.directive('seoTitle', function() { return { restrict: 'a', template: 'works' }; 

вам просто нужно добавить controller или некоторую логику, чтобы установить заголовок, который вы хотите

Сначала первое: я смотрел в инспекторе, и да, так или иначе тег названия появляется внутри тела. Но, похоже, это не влияет на его функцию.

Теперь к решению: на первый взгляд кажется, что в декларации директивы seoTitle отсутствует только replace: true . Добавление этого решения решает проблему, и seo-title заменяется тегом title как и планировалось, но Angular обертывает содержимое в дополнительном элементе span при создании новой области (даже если область seoTag объявлена ​​изолированной scope: {} ).

Я придумал следующее решение:

 app.directive('seoTitle', function() { function compile(elem, attrs, transclude) { return function ($scope) { transclude($scope, function (clone) { elem.empty(); elem.append(clone[0].innerText); }); }; } return { restrict: 'E', replace: true, transclude: true, scope: {}, compile: compile, template: '', }; }); 

Применение:

 My Title 

Как уже упоминалось, с replace: true вы можете удалить тег seo-title упаковки.

Чтобы удалить дополнительно созданный элемент span , я предоставляю функцию compile с возвратом функции postLink .

Я не могу объяснить, почему мне нужно использовать функцию postLink функции postLink . Похоже, что это довольно распространенная проблема: Angular создает в этом случае дополнительный элемент span . С небольшим количеством попыток и ошибок я обнаружил, что самый простой способ избавиться от span – это emtpy() элемент и добавить только innerText .

Вы можете попробовать библиотеку metang . Помимо названия он поддерживает другие метаtags (описание, автор, og:, твиттер и т. Д.).