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

问题

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:

How can I create directives in the header?

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

回答1:

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.

回答2:

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

回答3:

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.