ng-repeat should not leave junk directive fragments in the DOM

[MrHash]

Demonstrating the problem - http://plnkr.co/edit/GBuCj8uQkpm0H5yG3nGk?p=preview

Note that the directive HTML fragments are left in the DOM although on screen the directives appear as expected, although sometimes the order of the directives is mixed up. You can use your DOM inspector to see the junk directive fragments.

Delaying the application to scope of the initial array using a timeout results in expected behaviour in the DOM and on screen. Use of resolve in a route does not solve the problem.

The implications for the former problem are that classes are not applied correctly and order is not consistent.

[IgorMinar]

it's not clear from the description of this error, but it does appear that we are adding extra nodes with no content to the repeated elements. looks like an off by one error of some sort (maybe in block scanning algorithm).

I was able to repro this with v1.2.1

See screenshot with the extra node highlighted:

[tbosch]

Looking into this now.

[tbosch]

Minimal case to reproduce: element that has a ng-repeat and a directive that uses a templateUrl.

[tbosch]

Here is the line that is causing this: https://github.com/angular/angular.js/blob/master/src/ng/compile.js#L1704

[tbosch]

So the real problem is this:

• first ng-repeat clones the element before the template has been loaded
• then the template arrives, but it does not update the element reference that ng-repeat has and creates a new one on it's own.
• by this, ng-repeat is not able to delete that new element.

Here is a test without ng-repeat that shows the problem:

iit('should update element clones after a directive with templateUrl arrives', inject(function($httpBackend, 
    $compile, $rootScope) {
  $compileProvider.directive('test', function() {
    return {
      templateUrl: 'test.html'
    };
  });
  $httpBackend.whenGET('test.html').respond('<span>hello</span>');
  element = jqLite('<div test></div>');
  var link = $compile(element);
  var cloneBeforeTemplateArrived = link($rootScope.$new(), angular.noop);

  $httpBackend.flush();
  dump(cloneBeforeTemplateArrived);
  expect(cloneBeforeTemplateArrived.text()).toBe('hello');
}));

[tbosch]

So there are the two places that need to be fixed:

• In https://github.com/angular/angular.js/blob/master/src/ng/compile.js#L934 and https://github.com/angular/angular.js/blob/master/src/ng/compile.js#L937 we should pass on the $rootElement to nodeLinkFn and childLinkFn. This fixes the test in the previous comment
• In ng-repeat we should save the clone given to the cloneAttachFn, and not store the nodes directly. See https://github.com/angular/angular.js/blob/master/src/ng/directive/ngRepeat.js#L366-L374

I don't understand the logic behind the startNode and endNode in details yet, so have to look into this more...

[tbosch]

Closed via b0972a2