角度Ui-Bootstrap折叠闪烁页面加载

时间:2015-06-25 14:29:18

标签: javascript html angularjs twitter-bootstrap angular-ui-bootstrap

这是我用来在我的角应用程序中实现ui-bootstrap collapse指令的代码。

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

});

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

问题:首次加载页面时,折叠的内容会暂时显示,然后消失。有谁知道为什么会这样,如果有解决方法?我的frequencyCtrl控制器是否在折叠的html内容之前加载?

**还应该注意这个html位于嵌套的ui-view中。 Ui-Bootstrap js文件在主页上加载,因此在此视图渲染之前应该可以使用这些文档。

1 个答案:

答案 0 :(得分:1)

有一个拉取请求here来解决这个问题并解释它为什么会发生。