Question

我有一个使用bootstrap collapse元素的角度应用程序。我创建了一个名为accordion-list的指令来托管可折叠元素。然后，为了听取事件，我使用了jquery事件委托。出于某种原因，我的应用程序无法检测引导程序何时触发hidden.bs.collapse事件。这是我的代码：

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

帮助你们帮助我。提前致谢。：）

修改

这是我的档案：

的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>

分音/ 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 /休息-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');
    }]);
})();

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

Answer 1

我们不在控制器中使用jquery代码。

控制器不适合DOM操作。

指令是DOM操作所需的。

同样在AngularJS中，我们通常不使用jQuery事件编程风格。

这是orignial code的近似掠过者。如果我理解正确你试图切换glyphicon状态的状态+和 - 使用下面的代码： -

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

点击解决方案插件的here。

解决方案全部在accordion.html中注意ng-model但是我已经在控制器中注释掉了你的jquery代码。

ng-model="collapseState"

这是为了保持国家。

然后进一步通知

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

这里我们根据collapseState[$index]的值选择课程。

另请注意ng-click基本上切换collapseState[$index]

的值

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

到目前为止，我们所做的是使用模型并通过操纵模型来改变视图。这是AngularJS方式的要点。

Answer 2

现在，我刚刚改变了我的事件监听器。出于某种原因，jquery无法听到hidden.bs.collapse。我注意到点击事件不适合这种情况，因为如果你点击足够快，你可以用一个闭合的手风琴和一个减号图标结束。所以，我已经将事件监听器改为：

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

这很好用。但是，正如bhantol所说，这并不是一种做事的方式。拥有更好解决方案的人赢得奖金xD

bootstrap collapse事件hidden.bs.collapse未被检测到

2 个答案: