How to create an Angular directive in the section of a document?

Question

I am new to angular.js. I am trying to create a directive to add some title and meta tags in the <head> section of html documents, but I am having some trouble.

My index.html document is as following:

<!DOCTYPE html>
<html ng-app="myApp">
<head>
    <meta charset="UTF-8">
    <base href="/">
    <seo-title></seo-title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.1/angular.min.js"></script>
    <script src="https://code.angularjs.org/1.4.1/angular-route.min.js"></script>
    <script src="/incl/js/myApp.js"></script>
</head>
<body >
    <div ng-view></div>
</body>
</html>

My javascript is:

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: '<title>{{seo.title}}</title>'
    };
});

When I open the inspector, the directive has been moved to the <body> and has not been replaced with the template:

enter image description here

How can I create directives in the header?

P.S.: A code example would be great!

Why would u need a directive to add meta tags? Just put them in from the start? And title can be set from a controller easily which can be assigned to the html tag and the head will have access to it. — Chrillewoodz, Jul 07 '15 at 19:42
Some page will have some meta tags and others won't. Besides, it is not only about title, it could be about setting a robots meta tag to noindex a page, etc... — Jérôme Verstrynge, Jul 07 '15 at 19:48
I'm not certain, but I think HTML spec doesn't allow for custom elements, like `` as a child of ``. Regardless, the template doesn't replace the directive element - you could use `replace: true` (but that is being deprecated), or you could just use an attribute directive instead `` — New Dev, Jul 07 '15 at 19:51
no need for a template or custom element , just use `title` with `restrict:'E'` for the directive — charlietfl, Jul 07 '15 at 22:50

Martin · Answer 1 · 2015-07-18T15:20:35.230

Your directive does not need to go in the head to set the title. Just have your directive inject $window and set $window.document.title = 'your title'.

UPDATE This is how you can update meta tags.

For updating meta tags I would use a Directive like this:

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('<meta name="' + name + '" content="' + content + '">');
                }
            }
        }
    }

}

directive('mmMetaTags', mmMetaTags);

Along with a service to set the 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 <head>');
    }
}

// private
MetaTags.prototype._updateSubscriber = function(name, content) {
    this.subscriber(name, content);    
}

service('metaTags', MetaTags);

So in your head tag you would include the attribute mm-meta-tags. Then in your controller you would inject the metaTags service and call addMetaTag to update the tags.

I am aware of the simpler solution for titles, but as mentioned in the question comments, it is not only about title.. — Jérôme Verstrynge, Jul 08 '15 at 06:53
@JVerstry I updated my answer with an example of directive and service to set meta tags. — Martin, Jul 16 '15 at 17:08

score 2 · Answer 2 · edited May 23 '17 at 11:52

You answer is here: Set Page title using UI-Router, implemented in your code it could be:

<!DOCTYPE html>
<html ng-app="myApp">
<head>
    <meta charset="UTF-8">
    <base href="/">
    <title seo-title>doesn't work</title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.1/angular.min.js"></script>
    <script src="https://code.angularjs.org/1.4.1/angular-route.min.js"></script>
    <script src="/incl/js/myApp.js"></script>
</head>
<body >
    <div ng-view></div>
</body>
</html>

and you js:

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

you just need to add a controller or some logic to set the title you want

score 2 · Answer 3 · answered Jul 07 '15 at 21:41

First things first: I was looking in the inspector and yes, somehow the title tag appears within the body. But it seems not to affect its function.

Now to the solution: At first glance it seems that only replace: true is missing in the declaration of the seoTitle directive. Adding it solves the problem and the seo-title is replaced with title tag as planned, but Angular wraps the content in an additional span element as a new scope is created (even if the scope for seoTag is declared isolated scope: {}).

I came up with following solution:

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: '<title ng-transclude></title>',
    };

});

Usage:

<seo-title>My Title</seo-title>

As already mentioned, with replace: true you can remove the wrapping seo-title tag.

In order to remove the additionally created span element, I provide the compile function with returns the postLink function.

I can't really explain, why I need to use the transclude function within the postLink function. It seems to be a quite common problem, that Angular creates an additional span element in this case. With a little bit try and error I found that the easiest way to get rid of the span, is to emtpy() the element and append only the innerText.

no idea where this extra span comes from, never seen that before. Solution provided seems far more complex than what is needed — charlietfl, Jul 07 '15 at 22:47

score 0 · Answer 4 · answered Jun 21 '16 at 06:51

0

You can try metang library. Beside title it supports other meta tags(description, author, og:, twitter:, etc)

answered Jun 21 '16 at 06:51

timfjord

1,759
19
20

Hey can you please help me with metang by any sample – Ashu Oct 18 '16 at 10:02
Yes, sure. Here is example https://gist.github.com/timsly/85aadbfb559d85c03a0995f58b28ba56 – timfjord Oct 18 '16 at 17:28

score 0 · Answer 5 · answered Dec 29 '20 at 22:50

    angular.directive('ngHead', function () {
    let strHtml = '';
    strHtml += '<meta charset="utf-8">';
    strHtml += '<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">';
    strHtml += '<meta http-equiv="x-ua-compatible" content="ie=edge">';
    strHtml += '<meta name="google" content="notranslate" />';
    strHtml += '<title>';
    strHtml += '    title';
    strHtml += '</title>';
    return {
        restrict: 'A',
        link: function (scope, element, attrs) {
            element.append(strHtml);
        }
    }
});

in your html <head ng-head></head> work for me.

How to create an Angular directive in the section of a document?

5 Answers5

Linked