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

Question

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

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

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

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

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

有什么想法吗？

Answer 1

坏消息

通过反复试验，我发现 WOW's "asynchronous content support" 仅在您调用 new WOW().init(); 时在 DOM 中呈现 wow 元素时才有效。否则它不会同步任何东西。

证明：

Not Working Example

Working Example

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

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

Another Working Example based on your code

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

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

请看一下this example that I've made for you

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();
    });
  });
});

或the equivalent example with your original code：

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 渲染后被实例化，因此 $timeout 内的函数确保代码将在 $diggest 循环结束时执行，在你浏览器已经在 DOM 中呈现了您的 $scope 的新值。

我想你也可以这样做（见下文），但我认为最好将 Promise 链接起来，而不是把一个放在另一个里面：

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