引导可折叠面板在 ng-if 内不起作用

Posted 2023-05-09

【中文标题】引导可折叠面板在 ng-if 内不起作用

【英文标题】：bootstrap collapsible panel not working inside the ng-if

【发布时间】：2020-07-27 00:15:29

【问题描述】：

我正在使用带有 Angular js 的引导可折叠面板。但是，当我将可折叠面板放入 div 并添加 ng-if 时，可折叠无法正常工作。

User <input type="checkbox" ng-model="isUser"/>

<div class="col-md-12" ng-if="!isUser">
                 <div class="panel-group driving-license-settings" id="accordion">
                                            <div class="panel panel-default">
                                                <div class="panel-heading">
                                                    <h4 class="panel-title"> </h4>
                                                    <div class="checkbox" id="testCheckBox">
                                                        <label data-target="#collapseOnes">
                                                            <input type="checkbox" ng-model="a"/> I have Driver License  
                                                        </label>
                                                    </div>
                                                </div>
                                                <div id="collapseOnes" class="panel-collapse collapse in eh">
                                                    <div class="panel-body">
                                                        <div class="driving-license-kind">
                                                         content
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>  
</div>

我在可折叠区域使用下面的 jquery 代码

    $('.collapse').collapse();
$("input[type='checkbox']").bind('click dblclick', function(evt) 
    if ($(this).is(":checked")) 
        $(this).parents('.panel-group').find('.collapse').slideDown('fast');
     else 
        $(this).parents('.panel-group').find('.collapse').slideUp('fast');
    
)

当我删除“ng-if”条件时，可折叠面板运行良好。你能帮我解决这个问题吗？ 我们不能在“ng-if”中使用引导可折叠面板吗？

【问题讨论】：

当你的ng-if条件为false时，该元素将从DOM中移除，你不能对其应用任何操作

【参考方案1】：

听起来像是在呈现 collapsible panel 之前的 jquery 调用。

我相信$(this).parents('.panel-group').find('.collapse') 不会返回任何内容。

提醒你，ng-if 根本不渲染 DOM。

快速解决方案是移至ng-show 另一种解决方案是在isUser 为假时调用jquery 代码。

---

我建议你不要把 angular js 和 jquery 混用，不好的做法。

你有 Angular js 的引导程序：https://angular-ui.github.io/bootstrap/#!#collapse