这是我用来在我的 Angular 应用程序中实现 ui-bootstrap 折叠指令的代码。
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"
}
};
});
我还将 UI-Bootstrap 依赖项添加到我的 Angular 应用程序中。整体崩溃正在起作用。
问题:当页面首次加载时,折叠的内容会短暂显示然后消失。有谁知道为什么会发生这种情况以及是否有解决方法?我的 frequencyCtrl Controller 是否在折叠的 html 内容之前加载?
**还应注意此 html 位于嵌套的 ui View 中。 Ui-Bootstrap js 文件在主页加载,因此这些脚本应该在此 View 渲染之前可用。
最佳答案
有一个拉取请求 here解决该问题并解释其发生的原因。
关于javascript - Angular Ui-Bootstrap 在页面加载时折叠闪烁,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31053270/