Я использую библиотеку GridLoadingEffects от Codrops вместе с Angular JS для подачи в нее элементов списка с данными из WordPress. Все работает с точки зрения Angular, извлекающего данные через запрос $ http и сохраняющего переменные асинхронно. Данные обрабатываются и связываются с HTML через ng-bind-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 нет элементов списка, и поэтому выдает неопределенную ошибку.
Я не опытный веб-разработчик, поэтому я не могу точно определить, где выполняется вызов для проверки элементов li в DOM и применения эффекта, и эта библиотека имеет много зависимостей, включая 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>
Он должен быть размещен в конце тела в соответствии с примером html-файла, предоставленного Codrops. Я думаю, что для того, чтобы исправить проблему, вышеуказанная функция должна запускаться, когда Angular передает данные в тег ul. Несмотря на то, что к нему прикреплен window.onload, он, вероятно, не считает, что есть что-то, что можно загружать с помощью angular.
Я прав в своих предположениях? Я уверен, что это легко исправить. Кто-нибудь может помочь?
UPDATE:
Вот как инициируется запрос $ 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 определено в .then моего http-запроса. Может быть полезно упомянуть, что эта ошибка указывает на строку в файле angular.min.js, а не на мой app.js.