Question

I want to do an ng-repeat in the <head> of a page in order to enumerate open graph meta tags. However, I'm not sure how to accomplish as it seems that tags allowed in <head> are containing tags.

If I simply add a <div> wrapper like I often do with ng-repeat, browsers bump it down from the <head> down into <body>.

I have considered creating my own do-nothing directive to allow me to do something like this

<custom-repeat-wrapper ng-repeat="entry in entries">
  <meta property="entry.key" content="entry.content"/>
</custom-repeat-wrapper>

I presume that would work, but for all I know, browsers might bump it down to <body> as well.

I guess I could potentially write my own directive that sorta works like ng-repeat, but doesn't require a wrapper, and instead duplicates the tag it is placed on.

Anyone have any other suggestions for a cleaner solution before I head down this path?

Answer 1

You would have to declare the angular app in the html tag and use the ng-repeat inside the meta tag, like this:

<html ng-app="myApp">
    <head ng-controller="headController">
      <meta ng-repeat="entry in entries" property ="{{entry.key}}" content="{{entry.content}}">
    </head>
</html>

And the controller:

angular.module('myApp', [])
  .controller('headController', function($scope) {
    $scope.entries = [{
      key: 'key1',
      content: 'content1'
    }, {
      key: 'key2',
      content: 'content2'
    }, ];

  })

Here is a working plunkr:

http://plnkr.co/edit/ztCTB4mhvyou4ccKVk0u?p=preview

How to do an ng-repeat inside the tag

1 个答案: