Question

我正在使用Codrops的GridLoadingEffects库和Angular JS一起为列表项提供来自wordpress的数据。一切都取决于Angular通过$ http请求检索数据并异步存储变量。数据经过处理，并通过ng-bind-html绑定到HTML。

<body ng-app="myApp">
    <div class="container" ng-controller="myController">
        <ul class="grid effect-6" id="grid" ng-bind-html="bindHTML(html_code)"></ul>
    </div>
</body>

由于检索数据而稍有延迟之后，我可以看到HTML实际上已经在检查器中加载到DOM中。但是，问题在于GridLoadingEffects效果会立即看到DOM中没有列表项，因此会引发未定义的错误。

我不是一位经验丰富的Web开发人员，因此我无法精确确定调用的位置以检查DOM的li元素并应用效果，并且该库具有很多依赖项，包括modernizr.js ，masonry.js，imagesloaded.js，AnimOnScroll.js等。更令我困惑的是，这些文件被加载到HTML的不同位置，某些位置位于头部，某些位置位于正文末尾。因此，就执行流程而言，我真的不知道如何解决此问题。我不确定，但我认为此功能可实例化效果。

<script>
window.onload = function() {
    new AnimOnScroll( document.getElementById( 'grid' ), {
        minDuration : 0.4,
        maxDuration : 0.7,
        viewportFactor : 0.2
    } );
}
</script>

根据Codrops提供的示例html文件，将其放置在正文的末尾。我认为，为了解决该问题，一旦Angular将数据馈送到ul标记后，上述函数就必须运行。即使附加了window.onload，它也可能不会考虑到Angular还需要加载更多内容。

我的假设是否正确？我敢肯定有一个简单的解决办法。有人可以帮忙吗？

更新： $ http请求的发起方式如下：

(function() {
  'use strict'

  angular.module('myApp', [])
  .controller('myController', myController);

  myController.$inject = ['$scope', '$sce','$http']

  function myController ($scope, $sce, $http) {


    $http({
      method : "GET",
      url : myURL
    })
    .then(function(response) {
      $scope.myData = response.data;
      var list = new Array
      for (var i = 0; i < $scope.myData.length; i++) {
        var string = '<li><figure class="blurfilter semitransparent"><img src=myURL><figcaption><h3>' + $scope.myData[i]['title']['rendered'] + '</h3></figcaption></figure></li>';
        list.push(string)
      }
      $scope.html_code = list.join("")
      $scope.bindHTML = function(html_code) {
        return $sce.trustAsHtml(html_code)
      };
    });    
  };
})();

更新2：

我的HTML现在使用ng-repeat分离模型和视图：

<li ng-repeat="(key, val) in myData">
    <h3>{{val.title.rendered}}</h3>
</li>

还有我的角度代码（省略了http请求）：

(function() {
  'use strict'
  angular.module('myApp', [])
  .controller('myController', myController);
  myController.$inject = ['$scope', '$sce','$http']
  function myController ($scope, $sce, $http) {
    $scope.$watch('myData', function() {
    // if the myData is loaded
        if ($scope.myData.length > 0) {
            new AnimOnScroll( document.getElementById( 'grid' ), {
                minDuration : 0.4,
                maxDuration : 0.7,
                viewportFactor : 0.2
            });
        }
    });

现在我得到$ scope.myData是未定义的。 $scope.myData在我的http请求的.then中定义。可能有一点值得提及，即该错误指向angular.min.js文件中的一行，而不是我的app.js。

Answer 1

使用$ http服务获取数据后，您可以尝试在数据变量的角度控制器中使用$ scope。$ watch函数。

   $scope.$watch('myData', function() {
       // if the myData is loaded
       if ($scope.myData && $scope.myData.length > 0) {
           // your code
       }
   });

Answer 2

我了解我的问题从检索数据后运行功能到检索的数据填充DOM之后运行功能有所偏离。对于遇到相同问题的人（不是在检索数据时，而是在检索数据并填充DOM之后），您需要使用指令。检查这篇文章：ng-repeat finish event。您的解决方案在这里。

Angular检索数据后运行JS脚本

2 个答案: