当超时中填充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" 只有在您创建时在DOM中呈现wow元素时才会起作用致电new WOW().init();。否则它不会同步任何东西。

证明：

Not Working Example

Working Example

唯一的区别是工作示例中包含这个虚拟标记：

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

Another Working Example based on your code

因此，如果您希望WOW异步工作，请确保您有一个虚拟元素，其中包含＆＃34;哇＆＃34;在进行new WOW().init();电话会议之前上课。

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

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

事实是，在呈现DOM之后，WOW实际上需要实例化，因此$timeout内的函数确保代码将在{{1}的末尾执行在您的浏览器已经在DOM中呈现$diggest的新值之后循环。

我想你也可以这样做（见下文），但我认为将承诺链接起来而不是将其中一个放在另一个中更好：

$scope