evento di avvio di avvio nascosto hidden.bs.collapse non rilevato

Ho un'applicazione angolare che utilizza l'elemento di compressione di avvio. Ho creato una direttiva chiamata elenco-fisarmonica che ospita gli elementi comprimibili. Quindi, per ascoltare gli eventi, ho usato la delega dell'evento jquery. Per qualche motivo, la mia applicazione non può rilevare quando il bootstrap attiva l'evento hidden.bs.collapse. Ecco il mio codice:evento di avvio di avvio nascosto hidden.bs.collapse non rilevato

//app.js 
    'use strict'; 

(function() { 
    var provasNaoIdentificadas = angular.module("provasNaoIdentificadas", [ 
     'restClient' 
    ]); 

    provasNaoIdentificadas.controller("accordionCtrl", ["$scope", "ListaInscricao", function($scope, ListaInscricao){ 
     $scope.inscricao = { 
      "Secretaria": "" 
     }; 

     $("accordion-list").on("hidden.bs.collapse shown.bs.collapse", ".collapse", function (event) { 
      if ($(this).hasClass("in")) { 
       $(this).prev().find(".glyphicon").removeClass("glyphicon-plus glyphicon-minus").addClass("glyphicon-minus"); 
       $(this).prev().find("span.pull-right.text-muted").removeClass("expandir fechar").addClass("fechar"); 
      } else { 
       $(this).prev().find(".glyphicon").removeClass("glyphicon-plus glyphicon-minus").addClass("glyphicon-plus"); 
       $(this).prev().find("span.pull-right.text-muted").removeClass("expandir fechar").addClass("expandir"); 
      } 

      console.log(1, this, event); // i have detected the problem by interpreting 
     }); 

     ListaInscricao.get({"id": 1}, function(data){ 
      if (data.Sucesso) { 
       $scope.inscricao = data.Dados; 
      } else { 
       // toastr 
      } 
     }); 
    }]); 

    provasNaoIdentificadas.directive('accordionList', function() { 
     return { 
      "restrict": "E", 
      "templateUrl": "partials/accordion.html" 
     }; 
    }); 
})();

aiutarvi ragazzi mi può aiutare. Grazie in anticipo. :)

EDIT

Ecco i miei file:

index.html:

<!-- index.html --> 
<!DOCTYPE html> 
<html ng-app="provasNaoIdentificadas"> 
    <head> 
     <title>Hábile: Inscrição De Escolas Públicas Para Provas Não Identificadas</title> 
     <meta charset="UTF-8" /> 
     <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" /> 
     <link rel="stylesheet" href="css/vendor/bootstrap.min.css" /> 
     <script src="js/vendor/jquery-1.11.1.min.js"></script> 
     <script src="js/vendor/bootstrap.min.js"></script> 
     <script src="js/vendor/angular.min.js"></script> 
     <script src="js/vendor/angular-resource.min.js"></script> 
     <script src="js/app.js"></script> 
     <script src="js/rest-client.js"></script> 
     <style> 
      .panel-heading { 
       cursor: pointer; 
      } 

      .panel-heading .panel-title span.pull-right.text-muted { 
       font-size: 10px; 
      } 

      .panel-heading .panel-title span.pull-right.text-muted.expandir:before { 
       content: "clique para expandir"; 
      } 

      .panel-heading .panel-title span.pull-right.text-muted.fechar:before { 
       content: "clique para fechar"; 
      } 
     </style> 
    </head> 
    <body> 
     <div class="container"> 
      <div class="well text-justify"> 
       <h3>Formul&aacute;rio de Inscri&ccedil;&atilde;o H&aacute;bile 2014</h3> 
      </div> 
      <div ng-controller="accordionCtrl"> 
       <h2 id="nomeSecretaria">{{ inscricao.Secretaria }}</h2> 
       <accordion-list></accordion-list> 
      </div> 
      <div class="text-center"> 
       <button type="button" class="btn btn-lg btn-primary">Salvar Inscrição</button> 
       <button type="button" class="btn btn-lg btn-warning">Finalizar Inscrição</button> 
      </div> 
     </div> 
    </body> 
</html>

partial/accordion.html

<!-- partials/accordion.html --> 
<div class="panel-group" id="accordion_escolas"> 
    <div class="panel panel-default" ng-repeat="escola in inscricao.Escolas"> 
     <div class="panel-heading" data-toggle="collapse" data-target="#escola{{ $index }}" data-parent="#accordion_escolas"> 
      <div class="panel-title"> 
       <span class="glyphicon glyphicon-plus"></span> 
       {{ escola.Nome }} <span class="text-muted">x alunos inscritos</span> 
       <span class="pull-right text-muted expandir"></span> 
      </div> 
     </div> 
     <div id="escola{{ $index }}" class="panel-collapse collapse"> 
      <div class="panel-body"> 
       <p> 
        <label for="qtdProfessoresEscola{{ $index }}">Qtd. Professores</label><br /> 
        <input class="form-control" type="text" id="qtdProfessoresEscola{{ $index }}}}" value="{{ escola.QtdProfessores }}" /> 
       </p> 
       <div class="panel-group" id="accordion_escola{{ $index }}"> 
        <div class="panel panel-default" ng-repeat="serie in escola.Series"> 
         <div class="panel-heading" data-toggle="collapse" data-target="#turma_{{ $index }}_escola{{ $parent.$index }}" data-parent="#accordion_escola{{ $parent.$index }}"> 
          <div class="panel-title"> 
           <span class="glyphicon glyphicon-plus"></span> 
           {{ serie.Nome }} <span class="text-muted">y alunos inscritos</span> 
           <span class="pull-right text-muted expandir"></span> 
          </div> 
         </div> 
         <div id="turma_{{ $index }}_escola{{ $parent.$index }}" class="panel-collapse collapse"> 
          <div class="panel-body"> 
           <table class="table table-hover table-condensed table-bordered"> 
            <thead> 
             <tr> 
              <th>Turma</th> 
              <th>Qtd Alunos</th> 
              <th>Qtd Testes A3</th> 
              <th>Alunos PCD</th> 
              <th></th> 
             </tr> 
            </thead> 
            <tbody> 
             <tr ng-repeat="turma in serie.Turmas"> 
              <td>{{ turma.Nome }}</td> 
              <td><input class="form-control" type="text" value="{{ turma.QtdAlunos }}" /></td> 
              <td><input class="form-control" type="text" value="{{ turma.QtdTestesA3 }}" /></td> 
              <td><input class="form-control" type="text" value="{{ turma.AlunosPCD }}" /></td> 
              <td><button class="btn btn-primary btn-sm" type="button">Excluir Turma</button></td> 
             </tr> 
            </tbody> 
           </table> 
           <p> 
            <button class="btn btn-primary" type="button">Adicionar Turma</button> 
           </p> 
          </div> 
         </div> 
        </div> 
       </div> 
      </div> 
     </div> 
    </div> 
</div>

JS/app.js:

/* js/app.js */ 
'use strict'; 

(function() { 
    var provasNaoIdentificadas = angular.module("provasNaoIdentificadas", [ 
     'restClient' 
    ]); 

    provasNaoIdentificadas.controller("accordionCtrl", ["$scope", "ListaInscricao", function($scope, ListaInscricao){ 
     $scope.inscricao = { 
      "Secretaria": "" 
     }; 

     $("accordion-list").on("hidden.bs.collapse shown.bs.collapse", ".collapse", function (event) { 
      if ($(this).hasClass("in")) { 
       $(this).prev().find(".glyphicon").removeClass("glyphicon-plus glyphicon-minus").addClass("glyphicon-minus"); 
       $(this).prev().find("span.pull-right.text-muted").removeClass("expandir fechar").addClass("fechar"); 
      } else { 
       $(this).prev().find(".glyphicon").removeClass("glyphicon-plus glyphicon-minus").addClass("glyphicon-plus"); 
       $(this).prev().find("span.pull-right.text-muted").removeClass("expandir fechar").addClass("expandir"); 
      } 

      console.log(1, this, event); 
     }); 

     ListaInscricao.get({"id": 1}, function(data){ 
      if (data.Sucesso) { 
       $scope.inscricao = data.Dados; 
      } else { 
       // toastr 
      } 
     }); 
    }]); 

    provasNaoIdentificadas.directive('accordionList', function() { 
     return { 
      "restrict": "E", 
      "templateUrl": "partials/accordion.html" 
     }; 
    }); 
})();

JS/Rest-Client.js:

/* js/rest-client.js */ 
'use strict'; 

(function(){ 
    var restClient = angular.module('restClient', ['ngResource']); 

    restClient.factory('ListaInscricao', ['$resource', function ($resource) { 
     return $resource('mock/lista_inscricao.json'); 
    }]); 
})();

finto/lista_inscricao.json:

{ 
    "Sucesso": true 
    , 
    "Mensagem": "" 
    , 
    "Dados": { 
     "Secretaria": "Secretaria de Educação ABC" 
     , 
     "Escolas": [ 
      { 
       "Nome": "Escola 1" 
       , 
       "QtdProfessores": 12 
       , 
       "Series": [ 
        { 
         "Nome": "1º Ano Ensino Médio" 
         , 
         "Turmas": [ 
          { 
           "Nome": "A" 
           , 
           "QtdAlunos": 30 
           , 
           "QtdTestesA3": 0 
           , 
           "AlunosPCD": "27,29" 
          } 
          , { 
           "Nome": "B" 
           , 
           "QtdAlunos": 28 
           , 
           "QtdTestesA3": 2 
           , 
           "AlunosPCD": "" 
          } 
         ] 
        } 
        , 
        { 
         "Nome": "2º Ano Ensino Médio" 
         , 
         "Turmas": [ 
          { 
           "Nome": "A" 
           , 
           "QtdAlunos": 25 
           , 
           "QtdTestesA3": 1 
           , 
           "AlunosPCD": "7" 
          } 
         ] 
        } 
       ] 
      } 
      , 
      { 
       "Nome": "Escola 2" 
       , 
       "QtdProfessores": 10 
       , 
       "Series": [ 
        { 
         "Nome": "3º Ano Ensino Médio" 
         , 
         "Turmas": [ 
          { 
           "Nome": "A" 
           , 
           "QtdAlunos": 30 
           , 
           "QtdTestesA3": 0 
           , 
           "AlunosPCD": "15,27" 
          } 
          , { 
           "Nome": "B" 
           , 
           "QtdAlunos": 26 
           , 
           "QtdTestesA3": 0 
           , 
           "AlunosPCD": "" 
          } 
          , { 
           "Nome": "C" 
           , 
           "QtdAlunos": 25 
           , 
           "QtdTestesA3": 0 
           , 
           "AlunosPCD": "" 
          } 
         ] 
        } 
       ] 
      } 
     ] 
    } 
}

fonte

2014-10-24 André Marcondes Teixeira

È collassare sulla pagina? Sei sicuro che l'evento sia stato licenziato? –

sta collassando, ma l'evento non è registrato nella console e non sta cambiando l'icona pieghevole quando si chiude la fisarmonica –

Penso che il tuo problema sia nel tuo codice html. Puoi postarlo o fare un violino? –

per ora, ho appena cambiato il mio listener di eventi. Per qualche motivo, jquery non può sentire hidden.bs.collapse. Ho notato che l'evento click non è adatto a questo caso, perché se fai clic abbastanza velocemente, puoi terminare con una fisarmonica chiusa e un'icona meno. Così, ho cambiato il listener di eventi:

$(document).on("hide.bs.collapse show.bs.collapse", ".collapse", function (event) { 
    $(this).prev().find(".glyphicon").toggleClass("glyphicon-plus glyphicon-minus"); 
    $(this).prev().find("span.pull-right.text-muted").toggleClass("expandir fechar"); 
    event.stopPropagation(); 
});

Questo funziona abbastanza bene. Ma, come ha detto il fantoccio, non è proprio il modo angolare di fare le cose. Quello con una soluzione migliore vince il premio xD

fonte

2014-10-30 10:37:35

Questa domanda fornisce un metodo CSS puro per fare ciò che stai cercando di fare? http://stackoverflow.com/a/18568997/1745738 – johnsnails

non usiamo il codice jQuery in controllori.

I controller non sono il posto giusto per la manipolazione del DOM.

Le direttive sono ciò che serve per la manipolazione del DOM.

Anche in AngularJS in genere non viene utilizzato lo stile di programmazione per eventi jQuery.

Ecco il plunker approssimativo del vostro orignial code. Se ho capito bene si sta cercando di cambiare lo stato di glyphicon Stato + e - usando il codice seguente: -

$("accordion-list").on("hidden.bs.collapse shown.bs.collapse", ".collapse", function (event) { 
    if ($(this).hasClass("in")) { 
     (this).prev().find(".glyphicon").removeClass("glyphicon-plus glyphicon-minus").addClass("glyphicon-minus"); 
     $(this).prev().find("span.pull-right.text-muted").removeClass("expandir fechar").addClass("fechar"); 
    } else { 
     $(this).prev().find(".glyphicon").removeClass("glyphicon-plus glyphicon-minus").addClass("glyphicon-plus"); 
     $(this).prev().find("span.pull-right.text-muted").removeClass("expandir fechar").addClass("expandir"); 
    } 

    console.log(1, this, event); // i have detected the problem by interpreting 
});

Clicca here per la plunker soluzione.

La soluzione è tutto in fisarmonica.html avviso ng-model tuttavia ho discusso il codice jquery nel controller.

ng-model="collapseState"

questo è per tenere lo stato.

poi a nuovo avviso

<span class="glyphicon" 
    ng-class="collapseState[$index] ? 'glyphicon-minus' : 'glyphicon-plus'"> 
</span>

qui scegliere la classe in base al valore di collapseState[$index].

noti anche ng-click, che alterna sostanzialmente il valore di collapseState[$index]

ng-click="collapseState[$index]= !collapseState[$index]"

Finora quello che abbiamo fatto è usato un modello e alterata la vista manipolando il modello. Questo è l'essenza del modo AngularJS.

fonte

2014-10-30 06:17:21 bhantol

: D grazie mille per la vostra attenzione. –

Ho capito che l'evento click non è adatto a questo caso, perché se fai clic abbastanza velocemente, l'icona finirà con il segno meno quando il pieghevole è chiuso. –

Non sono riuscito a trovare un modo per rendere angolare l'ascolto di eventi personalizzati, questo è il vero problema. Quindi mi sono imposto di usare la manipolazione DOM di jquery. –

evento di avvio di avvio nascosto hidden.bs.collapse non rilevato

risposta

Problemi correlati