[英]Angular Ui-Bootstrap Collapse Flashing on Page Load
Here is the code I'm using to implement the ui-bootstrap collapse directive within my angular app.这是我用来在我的 angular 应用程序中实现 ui-bootstrap 折叠指令的代码。
HTML: HTML:
<div ng-controller="frequencyCtrl" style="margin-top:10px">
<button class="btn btn-default" ng-click="isCollapsed = !isCollapsed; update()">{{status}}</button>
<hr>
<div ng-init="" collapse="isCollapsed">
<div style="margin:0" class="checkbox">
<label><input type="checkbox" value="">Default</label>
</div>
<div style="margin:0" class="checkbox">
<label><input type="checkbox" value="">Manual</label>
</div>
<div style="margin:0" class="checkbox">
<label><input type="checkbox" value="">No Cap</label>
</div>
</div>
Controller:控制器:
app.controller('frequencyCtrl', function ($scope) {
$scope.isCollapsed = true;
$scope.status = 'No';
$scope.update = function(){
if ($scope.status === 'No') {
$scope.status = "Yes"
} else {
$scope.status = "No"
}
};
}); });
I also have the UI-Bootstrap dependency added to my angular app.我还将 UI-Bootstrap 依赖项添加到我的 angular 应用程序中。 Overall collapse is working.整体崩溃正在发挥作用。
Issue: When the page first loads the collapsed content is briefly visible and then disappears.问题:当页面首次加载时,折叠的内容短暂可见,然后消失。 Does anyone know why this is happening and if there is a workaround?有谁知道为什么会发生这种情况以及是否有解决方法? Does my frequencyCtrl controller load prior to the collapsed html content?我的 frequencyCtrl 控制器是否在折叠的 html 内容之前加载?
**Also it should be noted this html sits in a nested ui-view. **还应该注意的是,这个 html 位于嵌套的 ui-view 中。 Ui-Bootstrap js files are loaded at the homepage, so those scrips should be available prior to this view rendering. Ui-Bootstrap js 文件是在主页加载的,因此这些脚本应该在此视图渲染之前可用。
有一个拉请求这里来解决这一问题,并解释了为什么它的发生。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.