Eu tenho uma versão muito resumida do que estou fazendo que esclarece o problema.
Eu tenho um simples directive
. Sempre que você clica em um elemento, ele adiciona outro. No entanto, ele precisa ser compilado primeiro para renderizá-lo corretamente.
Minha pesquisa me levou a $compile
. Mas todos os exemplos usam uma estrutura complicada que eu realmente não sei como aplicar aqui.
Os violinos estão aqui: http://jsfiddle.net/paulocoelho/fBjbP/1/
E o JS está aqui:
var module = angular.module('testApp', [])
.directive('test', function () {
return {
restrict: 'E',
template: '<p>{{text}}</p>',
scope: {
text: '@text'
},
link:function(scope,element){
$( element ).click(function(){
// TODO: This does not do what it's supposed to :(
$(this).parent().append("<test text='n'></test>");
});
}
};
});
Solução de Josh David Miller: http://jsfiddle.net/paulocoelho/fBjbP/2/