Question

我遇到了麻烦。我正在使用这个插件＆＃34; angular-masonry＆＃34; （它在Github上）在页面上动态构建网格。当页面加载时我得到这个： http://joxi.ru/YBQPVP3JTJCwfIgLgbc

这是我的代码：

    <div class="container" style="width:80%">
      <h1 style="text-align: center; margin-bottom: 40px">
        Category: {{category.text}}
      </h1>
      <div>(masonry='' load-images="false")
        <div class="masonry-brick" ng-repeat="portal in category.claim_portals" style='width:50%;float:left'>
          <div>
            <h3>(style='margin-left:30px')
              Portal: {{portal.text}}
            </h3>
            <div class="category-list" ng-repeat="claim in portal.portal_claim" style="margin-bottom:2px">
              <div class="claim_sections">
                <claimforlist claim="claim"></claimforlist>
              </div>
            </div>
          </div>
        </div>
      </div>
</div>

但是在调整浏览器窗口大小后，一切都变得正常了，看起来像这样： http://joxi.ru/iBQPVP3JTJCUfLnoqQQ

我认为视图加载的时间早于JSON数据。任何人都可以帮助并告诉我如何在数据到达后加载视图？或者，如果您知道此类问题的其他原因，请回复。

提前致谢。

Answer 1

您可以添加范围布尔变量，其值设置为false，并在http promise成功时将值更改为true。

代码示例：

function myController($scope, YourDataServer) {
    $scope.dataLoadedSuccessfully = false;

    yourDataServer
        .query()
        .$promise
        .then(
            function(result) {
                $scope.dataLoaded = true; // set the value to true
            });
}

HTML看起来像：

<div id="loadingBar" ng-show="!dataLoadedSuccessfully">Loading data...</div>

<div id="dataWrapper" ng-show="dataLoadedSuccessfully">
    <!-- data goes here -->
</div>

加载数据后加载视图

1 个答案: