javascript - 超时填充 ng-repeat 时项目不显示

Question

当用户在页面上滚动到元素时，我正在使用wow.js为元素设置动画。我已经使用 an 将一堆元素加载到浏览器中，ng-repeat并且它们在立即加载时动画效果很好。您可以在此演示中看到正确加载的元素：

http://codepen.io/Chevex/pen/eHsCF

但是，当数据异步添加到$scope.items数组中时，它似乎不起作用。

http://codepen.io/Chevex/pen/KvpqB

如果删除.wow类，您可以看到元素已添加到页面中。该类.wow隐藏了元素，但由于某种原因它们出现在页面上时 wowjs 并没有显示它们。

有任何想法吗？

Answer 1

坏消息

通过反复试验，我发现WOW 的“异步内容支持”wow只有在您调用时在 DOM 中呈现了一个元素时才会起作用new WOW().init();。否则它不会同步任何东西。

证明：

不工作的例子

工作示例

唯一的区别是工作示例中有这个虚拟标签：

<section class="wow"></section>

基于您的代码的另一个工作示例

因此，如果您想WOW异步工作，请确保在new WOW().init();调用之前有一个带有“wow”类的虚拟元素。

上一个答案（也很有趣，你可能想看看它）

请看一下我为你制作的这个例子

angular.module('wowTest', [])
.factory('wowAPI', ['$http', function ($http) {
    return {        
        getItems: function () { return $http.get('data.json'); }
    }
}])
.controller('wowController', function($scope, wowAPI, $timeout){
  $scope.items = [];
  wowAPI.getItems().success(function(data){
    $scope.items=data.items; 
  }).then(function(){
    $timeout(function(){
      new WOW().init();
    });
  });
});

或原始代码的等效示例：

var app = angular.module('app', []);
app.controller('mainCtrl', function ($scope, $timeout) {
  $scope.items = [];
  $timeout(function () {
    for (var count = 0; count < 50; count++) {
      $scope.items.push({
        text: "Item " + count
      });
    }
  }).then(function(){ 
     $timeout(function(){
        new WOW().init();
      });
  });
});

问题是它似乎WOW实际上需要在 DOM 渲染后进行实例化，因此在您的浏览器已经在 DOM 中渲染了您的新值之后，内部的函数$timeout确保代码将在循环结束时执行.$diggest$scope

我想你也可以这样做（见下文），但我认为链接承诺要好得多，而不是一个在另一个里面：

.controller('wowController', function($scope, wowAPI, $timeout){
    $scope.items = [];
    wowAPI.getItems().success(function(data){
      $scope.items=data.items; 
      $timeout(function(){
        new WOW().init();
      });
    });
});