0

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?

1 respuesta 1

1

En primer lugar, un controlador nunca debería acceder directamente a la plantilla, precisamente para eso están las directivas. No es una buena práctica insertar código HTML directamente desde tu controlador.

Lo que quieres hacer, es más sencillo que eso, puedes usar la directiva ngIf, con ella, puedes mostrar elementos basándote en condiciones, que en este caso, podría ser una variable booleana en tu controlador. Así que tu código quedaría más o menos así:

<div ng-click="showTag()">Click me</div>
    <usuario persona="usuario" ng-if="mostrar"></usuario>
</div>

Y tu Javascript:

function controlTemplates ($scope,$http){
    $scope.mostrar = false;
    $scope.usuarios = {'usuario1': {nombre:"Juan",apellidos:'Perez Gomez',edad:'32'}, 'usuario2': {nombre:"Pedro",apellidos:'Jimenez Gomez',edad:'33'}};

    $scope.showTag = function () {
        $scope.usuario = $scope.usuarios.usuario1;
        $scope.mostrar = true;
    }

}

De esta forma, de primeras la directiva <usuario> no aparecería, pero cuando clicaras en el div si que lo haría. Además podrás ver como usando ngIf, el contenido HTML de la directiva no se encuentra en tu DOM cuando no se está mostrando, se añade automáticamente cuando la condición se cumple. Por el contrario, existe la directiva ngShow, la cual carga siempre el contenido en el DOM, y lo muestra u oculta usando CSS.

Espero que te sirva. Saludos!

2
  • Muchisimas gracias! Se me habia olvidado completamente la directiva ng-if. Estas cosas de que te obcecas con algo y no piensas bien. Realmente todo esto venia para quitar el código que puse en el controlador y separarlo todo correctamente.
    – Jose Vila
    el 15 abr. 2016 a las 14:00
  • De nada! no te preocupes, al principio cuesta un poco acostumbrarse a la forma de trabajar de Angular si vienes de programar Javascript con otros frameworks.
    – jjimenez
    el 15 abr. 2016 a las 14:16

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.