Angular modify meta tag

Question

I have a meta tag (apple smart banner) and I want to modify the argument on the fly. However it is currently not working:

I assume the ng-init is called before the head is created? If so, I can modify the meta through a load method?

here is the html:

<!doctype html>
<html lang="en" ng-app="myApp" class="passWindowDimensions">
<head>
    <meta charset="utf-8">
    <title>XXXXXX</title>
    <link rel="stylesheet" href="css/app.css"/>
    <link rel="stylesheet" href="css/bootstrap.css"/>

    <meta name="apple-itunes-app" content="app-id=XXXXXXX, app-argument = {{paramRId}}">

    <!--Let search engines know we are a single page ajax app-->
    <meta name="fragment" content="!">

    <script src="js/JQuery.js"></script>
    <script src="js/searchFunctions.js"></script>


</head>

Partial:

<div data-ng-init="loadMe()" div class="col-md-12 passWindowDimensions">

Controller:

/**
         * Loading sequence. Loads the results
         */
        $scope.loadMe = function(){

          $scope.paramRId = 'test';


       };

there is no controller or directive shown to have scope in ``. Could try creating a `meta` directive — charlietfl, Dec 27 '13 at 21:34

score 4 · Answer 1 · answered Dec 27 '13 at 21:37

4

Which section of the page is your controller responsible for? I can't test this in a fiddle because the head tag is off limits, but it seems to me like you may just need to change

$scope.paramRId = 'test';

to

$scope.$root.paramRId = 'test';

answered Dec 27 '13 at 21:37

Joe

2,596
2
14
11

It works, just put the ng-controller in the and not in the – Jorge Eduardo Aug 08 '14 at 17:44
1

This answer is the only one that allows you full access to any variable in the without early termination of the – Eric Steinborn Oct 17 '14 at 19:09

score 4 · Accepted Answer · answered Dec 28 '13 at 01:28

4

Try a service and a directive

http://jsfiddle.net/VnXYB/

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

});
module.controller("TestCtrl", function($scope,smartBanner){
    $scope.update = function() {
        smartBanner.appId=$scope.appId;
        smartBanner.appArgument=$scope.appArgument;
    };
});

answered Dec 28 '13 at 01:28

kfis

4,739
22
19

Since the meta tag needs to be in the , make sure you put the ng-app directive on the tag instead of on the tag. – Jan Jun 16 '14 at 07:00
1

This causes lots of errors as any non-appropriate tag parsed in the head causes early termination of the . The useage of $scope.$root.var below is a much better solution IMO. – Eric Steinborn Oct 17 '14 at 19:05
then you could restrit that directive to attribute and not to element. – kfis Oct 19 '14 at 20:48
Hi, can you please provide an example – Christina Oct 28 '14 at 14:43
just replace restrict: "E", with restrict: "A" and you got – kfis Nov 02 '14 at 21:31

score 4 · Answer 3 · edited Jun 06 '15 at 03:51

4

The angular meta module manages your title tags and meta descriptions. It uses the same API as the $routeProvider, so it's super easy to configure.

https://github.com/monyiliev/angular-meta

edited Jun 06 '15 at 03:51

rebelliard

9,592
6
47
80

answered Jan 23 '14 at 14:56

user3215547

49
1

5

GitHub link is broken now. – Carol Skelly Mar 05 '15 at 13:58

Angular modify meta tag

3 Answers3

Linked