Angular Ui-Bootstrap 页面加载时折叠闪烁

Question

这是我用来在我的 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>

控制器：

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"
    }
};

});

我还在我的 angular 应用程序中添加了 UI-Bootstrap 依赖项。整体崩溃正在起作用。

问题： 当页面首次加载时，折叠的内容会短暂可见，然后消失。有谁知道为什么会发生这种情况以及是否有解决方法？我的 frequencyCtrl 控制器是否在折叠 html 内容之前加载？

**还应注意此 html 位于嵌套的 ui 视图中。 Ui-Bootstrap js 文件在主页加载，因此这些脚本应该在此视图渲染之前可用。

Answer 1

有一个拉取请求 here 可以解决该问题并解释它发生的原因。

Angular Ui-Bootstrap 页面加载时折叠闪烁

Angular Ui-Bootstrap Collapse Flashing on Page Load

html

javascript

twitter-bootstrap

angularjs

angular-ui-bootstrap