javascript - ejemplos - framework angular
AngularJS: ¿Cómo obtener la plantilla de directiva ng-repeat antes de compilarla? (1)
Estoy tratando de obtener la plantilla html inicial para la directiva ng-repeat que se utiliza dentro de mi directiva personalizada que transmite contenido anidado. Pero, en cambio, el texto html real que se estableció dentro de la directiva me viene ya sea compilado ng-repeat directive o simplemente un comentario que se parece a lo siguiente:
<!-- ngRepeat: item in items -->
Ya hice esa pregunta en github , pero desafortunadamente la respuesta no fue muy clara para mí. ¿Hay alguna manera de obtener la plantilla de directiva ng-repeat antes de compilarla?
Aquí hay un ejemplo simple de lo que estoy tratando de lograr (y un plnkr ):
app.directive(''parent'', function() {
return {
restrict:''E'',
template:''<div ng-transclude></div>'',
transclude: true,
priority: 1001,
scope: true,
compile: function(element, attrs) {
console.log(element.html());
console.log(element);
}
};
});
<parent>
<div ng-repeat="item in items">
{{item}}
</div>
</parent>
ng-repeat directiva ng-repeat tiene `transclude:" element ", y así, cuando se compila, todo el elemento se saca de DOM (en preparación para la transclusión) y se deja un comentario.
Entonces, el primer console.log(element.html()) no verá nada, ya que la transclusión de su propia directiva no ha sucedido.
Pero incluso si examina el código HTML interno en tiempo de enlace, se habrá compilado ngRepeat , pero su transclusión aún no ocurriría; sucede más tarde, cuando el scope.$watchCollection de ngRepeat .
Entonces, la única forma de ver el contenido es adelantarse a la compilación de ngRepeat . Puede hacer que su terminal: true directiva parent sea terminal: true , examinar los contenidos y volver a compilar manualmente.
También puede agregar una directiva que se ejecuta en un elemento repetible con mayor prioridad que ngRepeat y obtener los contenidos.
(Incluso podría reutilizar el nombre "ngRepeat" )
app.directive("ngRepeat", function(){
return {
require: "?^parent", // optionally require your parent
priority: 1010,
compile: function(tElem){
var template = tElem.html();
return function link(scope, element, attrs, ctrls){
var parentCtrl = ctrls;
if (!parentCtrl) return;
// hand it off to the parent controller
parentCtrl.setTemplate(template);
}
}
}
})