ng-repeat in directive template AngularJS

Question

Why is my external template not rendering items using ng-repeat ?

--- AngularJS 1.1.5

I stumbled on this bug but I'm not sure if it's the same issue? If it is are there any work arounds?

Here's a Plunker using a static list but the solution needs to support two way binding because the data is dynamic. ( That's how it's supposed to work anyway... )

controller

.controller('main', ['$scope',function($scope) {
  $scope.items = ['a','b','c'];
}])

directive

.directive('items', function() {
    return {
        restrict: 'E',
        replace: true,
        controller: 'main',
        templateUrl: 'items.html',
        link: function(scope, controller) {
        }
    };
})

items.html

<div ng-repeat="item in items">
    {{item}}
</div>

Florian · Accepted Answer · 2013-08-03 12:20:18Z

3

This is because your directive uses a template that does not have on root element, try:

<div>
  <h1>What?</h1>
  <div ng-repeat="item in items">
    {{item}}
  </div>
</div>

for the template.

EDIT: To understand this, we can have a look at the source of angular itself. The compile-Methods responsible for this can be looked at here. The culprit is the mergeTemplateAttributes and the need for one root becomes apparent when looking at the intent here: When replacing DOM nodes, angular needs to pass on the attributes. When there is more than one node in the template fetched it will throw an error, as it cannot decide on the node which the original attributes will be applied to (see here for the error thrown).

The quote the developers here:

When the element is replaced with HTML template then the new on the template need to be merged with the existing attributes in the DOM. The desired effect is to have both of the attributes present.

edited Aug 3, 2013 at 12:20

answered Aug 2, 2013 at 15:09

Florian

3,3761 gold badge32 silver badges35 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Dan Kanze Over a year ago

+1 Thankyou that was it. I wonder why you "need" to wrap with a root element.

Florian Over a year ago

I extended my answer a bit on the topic.

Jay Shukla · Accepted Answer · 2013-08-02 15:11:29Z

3

Update your items.html as below:

 <div>
  <h1>What?</h1>
  <div ng-repeat="item in items">
      {{item}}
  </div>
</div>

answered Aug 2, 2013 at 15:11

Jay Shukla

5,8368 gold badges35 silver badges65 bronze badges

Comments

zs2020 · Accepted Answer · 2013-08-02 15:10:59Z

1

You need to wrap the template with one root like this:

<div>
    <h1>What?</h1>
    <div ng-repeat="item in items">
        {{item}}
    </div>
</div>

answered Aug 2, 2013 at 15:10

zs2020

54.7k30 gold badges157 silver badges223 bronze badges

Collectives™ on Stack Overflow

ng-repeat in directive template AngularJS

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related