bootstrap effondrement de l'événement caché.bs.l'effondrement de ne pas être détecté

J'ai angulaire de l'application qui utilise bootstrap effondrement de l'élément.
J'ai créé une directive appelée accordéon-liste de l'hôte, le réductible éléments.
Ensuite, pour écouter les événements, j'ai utilisé jquery cas de délégation.
Pour une raison quelconque, mon application ne peut pas détecter le moment où le "bootstrap" les feux de l' caché.bs.l'effondrement événement.
Voici mon code:

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

Aider les gars, vous pouvez m'aider. Merci à l'avance. 🙂

MODIFIER

Voici mes fichiers:

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>

partials/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');
}]);
})();

maquette/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": ""
}
]
}
]
}
]
}
}

Est qu'il s'effondre sur la page? Êtes-vous sûr que l'événement est déclenché?
elle s'effondre, mais l'événement n'est enregistré dans la console et il ne change pas réductible icône quand il ferme l'accordéon
Je pense que votre problème est dans votre code html. Pouvez-vous l'envoyer ou de faire du violon?
fait 🙂 j'ai posté le code

InformationsquelleAutor André Marcondes Teixeira | 2014-10-24

7

Nous n'utilisons pas de jquery dans les Contrôleurs.

Les contrôleurs ne sont pas le bon endroit pour la manipulation du DOM.

Directives sont ce dont vous avez besoin pour la manipulation du DOM.

Également dans AngularJS, nous avons en général de ne pas utiliser jQuery concours complet de style de programmation.

Voici une estimation de la plunker de votre orignial code. Si je comprends bien, vous essayez de passer à l'état de glyphicon état + et - à l'aide du code ci-dessous:-
```
$("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 
});
```
Cliquez sur ici pour la solution plunker.

La solution est dans accordion.html avis ng-model cependant, je hace en commentaire votre jquery code du contrôleur.
```
ng-model="collapseState"
```
c'est de tenir l'état.

puis d'autres avis
```
<span class="glyphicon" 
ng-class="collapseState[$index] ? 'glyphicon-minus' : 'glyphicon-plus'">
</span>
```
ici, nous choisissons la classe basée sur la valeur de collapseState[$index].

Également remarquer ng-click qui en gros permet de basculer la valeur de collapseState[$index]
```
ng-click="collapseState[$index]= !collapseState[$index]"
```
Jusqu'à présent nous avons utilisé un modèle et une altération de la vue en manipulant le modèle.
C'est l'essentiel de AngularJS façon.
- 😀 merci beaucoup pour votre attention.
- J'ai compris que l'événement click n'est pas adapté pour ce cas, car si vous cliquez sur assez rapide, l'icône terminer avec moins lorsque la grille est fermée.
- Je ne pouvais pas trouver un moyen de faire angulaire écouter des événements personnalisés, c'est le problème réel. Puis je me suis forcé à utiliser jquery de manipulation du DOM.
- et +1 pour votre attention 😉
- Vous demandez-vous si vous avez une pensée sur angularui-projet "bootstrap". Ils comblent les angularjs et bootstrap très bien et l'accordéon est un widget. angular-ui.github.io/bootstrap/#/accordéon
InformationsquelleAutor bhantol
6

pour l'instant, je viens de changer mon écouteur d'événement. Pour une raison quelconque, jquery peut pas entendre le caché.bs.l'effondrement. J'ai remarqué que l'événement click n'est pas adapté pour ce cas, car si vous cliquez sur assez rapide, vous pouvez vous retrouver avec un fermé de l'accordéon et un moins icône sur elle. Donc, j'ai changé l'écouteur d'événement à:
```
$(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();
});
```
Cela fonctionne assez bien. Mais, comme bhantol dit, il n'est pas tout à fait la angularjs façon de faire les choses. L'un avec une meilleur solution gagner le prix xD
- Cette question de fournir un pur CSS façon de faire ce que vous essayez de faire? stackoverflow.com/a/18568997/1745738
InformationsquelleAutor André Marcondes Teixeira

Vous devez vous connecter pour publier un commentaire.