Показывать динамической формы директивные органы с AngularJS

У меня есть следующая проблема:

Оказывается, что я хочу показать директивный орган <user></user> с Угловым и загружать в ней код директивного органа через один templateURL. Но этот директивный орган должен являться, когда нажимают на кнопку или div через один ng-click. Я помещаю вам пример, который я сделал себе, чтобы делать доказательство из, если он мог загрузить это. Директивный орган функционирует хорошо, если я загружаю ее прямо, но это не делает dinámicamente.

Код HTML части, где было бы нужно грузить, он:

<div ng-click="showTag()">Click me</div>
    <div id="loquesea">
    </div>  
</div>

И Угловой код, который я произвел, - следующий:

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>");
    }
}

Кто-то может показывать меня или объяснять, из-за которого происходит это?

0
задан 15.04.2016, 16:58
1 ответ

Во-первых, драйвер никогда не был бы должен соглашаться прямо на шаблон, точно для этого - директивные органы. Это не хорошая практика вводить код HTML прямо с твоего драйвера.

То, что ты хочешь сделать, он проще, чем это, ты можешь использовать директивный орган ngIf, с нею, можешь показывать элементы основываясь на условиях, которые в этом случае, это могла бы быть переменная booleana в твоем драйвере. Так что твой код остался бы более или менее таким:

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

И твой 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;
    }

}

Таким образом, первых директивный орган <usuario> он не появился бы, но когда clicaras в div если, что это сделал. Кроме того ты сможешь видеть, как используя ngIf, HTML-контент директивного органа не находится в твоем DOM, когда он не появляется, он добавляется автоматически, когда условие выполняется. Наоборот, существует директивный орган ngShow, которая загружает всегда контент в DOM, и это показывает или скрывает используя CSS.

Я надеюсь, что он подает тебя. Привет!

1
ответ дан 24.11.2019, 14:35
  • 1
    Большое спасибо! Мне забыл полностью директивный орган ng-if. Эти вещи, которых ты ослепляешь себя с чем-то и не думаешь хорошо. Действительно все это приходило, чтобы прекращаться c и # 243; я говорю, что я поместил в драйвере, и отделять все правильно. – Jose Vila 15.04.2016, 17:00
  • 2
    Не за что! не беспокойся, сначала будь сложно привыкать немного к способу работать Углового, если ты приходишь программирования Javascript с другими frameworks. – jjimenez 15.04.2016, 17:16

Теги

Похожие вопросы