How to insert meta tag to the head using a directive

Question

I'm trying to add a meta tag dynamically, I tried this fiddle, from this answer.

page:

<html ng-app="meumobiApp" ng-controller="SiteCtrl">
    <head>
        <smart-banner></smart-banner>
    </head>
    <body></body>
<html>

and directive:

module.directive("smartBanner",function(){
    return {
        restrict: "E",
        template: '<meta name="apple-itunes-app" content=""></meta>',
        replace: true,
        link: function(scope) {}   
   }
});

But the tag is being inserted in the body tag instead of the head.

It's possible to insert tags to the head or I must try something else?

Why would you want to add `meta` tags with JavaScript? Don't think whatever reads that will pick it up. — putvande, Aug 12 '14 at 14:17
@putvande because javascript is the coolest server-side scripting language ever. Ever heard of `node.js`? — pqnet, Aug 12 '14 at 14:40
@putvande https://www.google.com/search?q=angularjs+server+side+rendering i guess — pqnet, Aug 12 '14 at 14:50
Thanks for the comments, I searched and found nothing stating that create meta tags with javascript doesn't work or work, anyone have any article, doc, link, fiddle or anything that talk about it — T4deu, Aug 12 '14 at 15:14

score 1 · Accepted Answer · answered Aug 12 '14 at 14:42

in your directive link function you should do like this

module.directive("smartBanner",function(){
    return {
        restrict: "E",
        template: '<meta name="apple-itunes-app" content=""></meta>',
        replace: true,
        link: function(scope) {
         var metaTag=document.createElement('meta');
         metaTag.name = "apple-itunes-app";
         metaTag.content = "";
          document.getElementsByTagName('head')[0].appendChild(metaTag);
        }   
   }
});

but also you can do this without directive, but nevertheless directive also good idea

How to insert meta tag to the head using a directive

1 Answers1