使用 ng-show 显示时，无限滚动不显示项目

Question

当 this example 中的无限滚动（从 Angular Material 文档中复制）与按钮一起显示时，项目不会出现。

如果 ng-show=ctrl.show 更改为 ng-show=true，则会显示项目。

为什么 ng-show 不显示项目？

标记

<div ng-controller="AppCtrl as ctrl" ng-cloak="" class="virtualRepeatdemoInfiniteScroll" ng-app="MyApp">
  <md-content layout="column">
    <p>
       Display an infinitely growing list of items in a viewport of only 7 rows (height=40px).
       <br><br>
       This demo shows scroll and rendering performance gains when using <code>md-virtual-repeat</code>;
       achieved with the dynamic reuse of rows visible in the viewport area. Developers are required to
       explicitly use <code>md-virtual-repeat-container</code> as a wrapping parent container.
       <br><br>
       To enable infinite scroll behavior, developers must pass in a custom instance of
       mdVirtualRepeatModel (see the example's source for more info).
    </p>

    <button ng-click="ctrl.show=!ctrl.show" style="width:100px">Show</button>

    <md-virtual-repeat-container id="vertical-container" ng-show=ctrl.show>
      <div md-virtual-repeat="item in ctrl.infiniteItems" md-on-demand="" class="repeated-item" flex="">
        {{item}}
      </div>
    </md-virtual-repeat-container>
  </md-content>
</div>

JS

(function () {
  'use strict';

    angular
      .module('MyApp')
      .controller('AppCtrl', function($timeout) {

        // In this example, we set up our model using a plain object.
        // Using a class works too. All that matters is that we implement
        // getItemAtIndex and getLength.
        this.infiniteItems = {
          numLoaded_: 0,
          toLoad_: 0,

          // Required.
          getItemAtIndex: function(index) {
            if (index > this.numLoaded_) {
              this.fetchMoreItems_(index);
              return null;
            }

            return index;
          },

          // Required.
          // For infinite scroll behavior, we always return a slightly higher
          // number than the previously loaded items.
          getLength: function() {
            return this.numLoaded_ + 5;
          },

          fetchMoreItems_: function(index) {
            // For demo purposes, we simulate loading more items with a timed
            // promise. In real code, this function would likely contain an
            // $http request.

            if (this.toLoad_ < index) {
              this.toLoad_ += 20;
              $timeout(angular.noop, 300).then(angular.bind(this, function() {
                this.numLoaded_ = this.toLoad_;
              }));
            }
          }
        };
      });

})();

Answer 1

http://codepen.io/anon/pen/KdxjvM

有效。将 ng-show 更改为 style="visibility:hidden/visible"

我认为这与初始列表的滚动距离有关。当它不可见时，就没有高度。并且这个高度是在元素可见之前计算的。

使用 ng-show 显示时，无限滚动不显示项目

Infinite Scroll does not show items when displayed with ng-show

angularjs

angular-material