Tengo el siguiente problema:
Resulta que quiero mostrar una directiva <user></user>
con Angular y cargar en ella el código de la directiva a través de un templateURL
. Pero esta directiva se tiene que mostrar cuando se hace clic en un botón o div
a través de un ng-click
. Os pongo un ejemplo que me hice para hacer la prueba de si conseguía cargarlo. La directiva funciona bien si la cargo directamente pero no lo hace dinámicamente.
El codigo HTML
de la parte donde se tendría que cargar es:
<div ng-click="showTag()">Click me</div>
<div id="loquesea">
</div>
</div>
Y el código Angular que generé es el siguiente:
angular
.module("plantillas_app",[])
.controller("plantillas_ctrl",controlTemplates)
.directive('usuario',templates);
function templates () {
console.log("Cargando template...");
return{
restrict:'AE',
templateUrl:'template1.html',
scope:{
idCliente:"=persona"
}
};
}
function controlTemplates ($scope,$http){
$scope.usuario1= {nombre:"Juan",apellidos:'Perez Gomez',edad:'32'}
$scope.usuario2= {nombre:"Pedro",apellidos:'Jimenez Gomez',edad:'33'}
$scope.showTag = function () {
console.log("Cargando contenido");
$("#loquesea").html("<usuario persona='usuario1'></usuario><usuario persona='usuario2'></usuario>");
}
}
Alguien me puede indicar o explicar por que ocurre esto?