$ digest rendering ng-repeat como comentario

Estoy escribiendo una testing para una directiva, cuando ejecuto la testing, la plantilla (que está cargada correctamente) se representa igual que <!-- ng-repeat="foo in bar" -->

Para empezar, las partes relevantes del código:

Prueba

 ... beforeEach(inject(function ($compile, $rootScope, $templateCache) { var scope = $rootScope; scope.prop = [ 'element0', 'element1', 'element2' ]; // Template loading, in the real code this is done with html2js, in this example // I'm gonna load just a string (already checked the problem persists) var template = '<strong ng-repeat="foo in bar"> <p> {{ foo }} </p> </strong>'; $templateCache.put('/path/to/template', [200, template, {}]); el = angular.element('<directive-name bar="prop"> </directive-name>'); $compile(el)(scope); scope.$digest(); // <--- here is the problem isolateScope = el.isolateScope(); // Here I obtain just the ng-repeat text as a comment console.log(el); // <--- ng-repeat="foo in bar" --> })); ... 

Directiva

La directiva es bastante simple y no es el problema (fuera de la testing todo funciona bien):

 app.directive('directiveName', function () { return { restrict : 'E', replace : true, scope : { bar : '=' }, templateUrl : '/path/to/template', // Not used in this question, but still... }); 

Algunos detalles más:

  • La directiva, fuera de la testing, funciona bien
  • Si cambio la plantilla a algo mucho más simple como: <h3> {{ bar[0] }} </h3> la testing funciona bien
  • El rootScope se carga correctamente
  • Los resultados de isolateScope undefined

Si echas un vistazo a la salida generada que angular crea para ng-repeat , encontrarás comentarios en tu html. Por ejemplo:

 <!-- ngRepeat: foo in bars --> 

Estos comentarios son creados por la function de compilation – vea las fonts angulares:

 document.createComment(' ' + directiveName + ': '+templateAttrs[directiveName]+' ') 

Lo que obtienes si llamas a console.log(el); es ese comentario creado. Puede verificar esto si cambia la salida de esta manera: console.log (el [0] .parentNode). Verás que hay muchos childNodes: enter image description here

Si utiliza la directiva fuera de una testing, no tendrá conocimiento de este problema, ya que su directive-name elemento se replaceá por el fragment de DocumentFragment creado. Otra forma de resolver el problema es usar un elemento de envoltura para su plantilla de directiva:

 <div><strong ng-repeat="foo in bar"> <p> {{ foo }} </p> </strong></div> 

En este caso, tienes acceso al elemento div .