1

在我的 Angular 指令中,我尝试隐藏和显示手风琴面板。问题是,当我通过代码访问手风琴时,手风琴会中断。

例如,当我这样做时:

$("#collapseOne").collapse('hide')

面板已折叠,但标题中的链接不再起作用,因此用户无法展开面板。我也尝试过类似的事情:

$("#collapseOne").removeClass('in');$("#collapseOne").hide();

但它们都不起作用。或者它们具有相同的效果,或者根本不起作用。

这是html:

<div class="accordion" id="accordion2">
        <div class="accordion-group">
            <div class="accordion-heading">
                    <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseOne">
                        Customer
                    </a>
            </div>
            <div id="collapseOne" class="accordion-body collapse">

                <div class="accordion-inner">
                    Customer list
                </div>
            </div>
        </div>
         <div class="accordion-group">
            <div class="accordion-heading">
                <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseTwo">
                        My form
                </a>
            </div>
            <div id="collapseTwo" class="accordion-body collapse">
                <div class="accordion-inner">
                     <form novalidate data-ng-submit="certificateFormSubmit()">
                        Some form
                    </form>
                </div>
            </div>
        </div>
        <div class="accordion-group">
            <div class="accordion-heading">
                <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseThree">
                        Title for other content
                </a>
            </div>
            <div id="collapseThree" class="accordion-body collapse">
                <div class="accordion-inner">
                     Some other content
                </div>
            </div>
        </div>
    </div>

这是我的指令的签名:

app.directive('certificateEdit', function ($q, ProductService, CustomerService, CertificateService) {
    return {
        restrict: 'E',
        templateUrl: '/Certificate/Add',
        scope: {
            certificate: '=',
            customerId: '=',
            visible: '=',
            onCertificateSaved: '&'
        },
        controller: function ($scope, $element, $attrs) {
           // based on the certificate attribute value, I want to expand a accordion panel
        });

我试图创建一个小提琴,但我无法让小提琴工作。我花了两个小时来创建一个小提琴,但我无法让指令起作用..

4

2 回答 2

1

您是否尝试过将angularjs-ui 用于 bootstrap,它们是 Twitter Bootstrap 的 Angular 指令。

于 2013-07-15T10:30:16.880 回答
0

您可以使用 angular.element(jQuery 选择器) 现在您可以使用任何方法,因为它将您的元素作为对象 (jQuery 对象) 返回

于 2013-07-15T09:28:15.780 回答