1

Estou com um problema que após carregar um conteúdo HTML dinamicamente de forma assíncrona com o plugin jQuery Steps:

<section data-mode="async" data-url="test.html"></section>

o AngularJS não detecta o conteúdo e com isso todos os elementos que contém as diretivas ng-show é exibido em vez de ser ocultado como esperado.

Ambiente Punkler com o problema - Solucionado (Punkler atualizado):

http://plnkr.co/edit/6p1dVln2R9Pgb9ivoMcX?p=preview

PS: preciso que o carregamento seja assíncrono porque a quantidade de dados HTML que tenho que carregar é excessiva.

3
  • coloque todo o código dentro da tag section, exemplo: plnkr.co/edit/P09CFIoSp2G98LxJLZPn?p=preview
    – novic
    25/03/2017 às 14:21
  • Não tem como fazer assim. Todo o código HTML pesaria demais o browser e a solução é fazer async justamente pra evitar carregamento de dados excessivo e a medida que o usuário fosse passando no Wizard o Plugin iria removendo a aba anterior. É um Questionário gigante que envia todas as respostas para um script. É preciso dividi-lo em partes o carregamento. 25/03/2017 às 14:24
  • Do jeito que está no link da sua pergunta o código pouco importa se é carregado depois, ele sempre vai ser carregado na integra, estranho você dizer isso. Do jeito que está não dá mesmo, tem que fazer uma gambiarra do angular pegar esse elemento. Tem que ver se tem algo já feito para angular, eu pesquisei e não achei! se achar eu posto.
    – novic
    25/03/2017 às 14:30

1 Resposta 1

0

Solucionado (Punkler atualizado):

Eu usei ng-include com autoload: http://plnkr.co/edit/6p1dVln2R9Pgb9ivoMcX?p=preview

O código:

<!-- Jquery Steps HTML Template -->
<div id="wizard" ng-controller="wizardCtrl">
  <h3><i class="fa fa-question-circle" aria-hidden="true"></i> Arroz</h3>
  <section>
    <div ng-if="index == '1'" ng-include="'test.html'" onload="finishLoading()"></div>
  </section>
</div>

<script>
  // Jquery Steps Plugin
  $wizard = $("#wizard");
  $wizard.steps({
    headerTag: "h3",
    bodyTag: "section",

    enableFinishButton: false,
    enablePagination: true,
    enableAllSteps: false,
    forceMoveForward: true,
    titleTemplate: "#title#",
    cssClass: "wizard tabcontrol",

    labels: {
      loading: ""
    }
  });

  angular.module('myApp', [])
    .controller('wizardCtrl', ['$scope', '$timeout', function($scope, $timeout){
        $scope.index = "1";

        $scope.finishLoading = function (){
            // jQuery Steps
            var index = $wizard.steps("getCurrentIndex");
            // ...

            return true;
        };
    }]);
</script>

Com ng-if, você pode carregar o conteúdo das abas on-demand, ou seja, você pode usar um método jQuery Steps chamado getCurrentIndex para obter o índice atual. <Métodos>

Usando autoload substitui o método onContentLoaded do carregamento assíncrono do jQuery Steps. <Eventos>

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .