1

我有一些麻烦。我正在使用这个插件“angular-masonry”（它在 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 数据到达之前加载。谁能帮助并告诉我如何在数据到达后加载视图？或者如果您知道此类问题的另一个原因，请回复。

提前致谢。

4

1 回答 1

1

您可以添加一个值设置为的范围布尔变量false，并在您的 http 承诺成功时将值更改为 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>
于 2014-09-11T13:12:14.233 回答