Angular Ui-Bootstrap Collapse Flashing on Page Load

Question

Here is the code I'm using to implement the ui-bootstrap collapse directive within my angular app.

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. 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?

**Also it should be noted this html sits in a nested ui-view. Ui-Bootstrap js files are loaded at the homepage, so those scrips should be available prior to this view rendering.

Answer 1

有一个拉请求这里来解决这一问题，并解释了为什么它的发生。