Когда я добавляю данные в массив в $ scope с помощью функции addEventListener, новые данные могут регистрироваться в консоли, но DOM, повторяемый с помощью ng-repeat, не изменяется
angular.module('module', [])
.controller('controller', function ($scope) {
$scope.init = function () {
$scope.list = [1,2,3,4,5,6,7,8,9,10]
document.addEventListener('scroll', function (e) {
// the bottom of window
var windowBottom = e.target.documentElement.scrollTop + e.target.documentElement.clientHeight
// top of loading div
var loadingTop = document.getElementById('loading').offsetTop
if (windowBottom >= loadingTop) {
$scope.list.push($scope.list.length + 1)
console.log($scope.list)
}
})
}
<!DOCTYPE html>
<html lang="en" ng-app="module">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div style="height: 100%" ng-controller="controller" ng-init="init()">
<div id="wrapper">
<div id="scroller">
<div class="card" ng-repeat="i in list">{{i}}</div>
<div id="loading" class="loading">Loading...</div>
</div>
</div>
</div>
</body>
<script src="angular.min.js"></script>
<script src="main.js"></script>
</html>
html, body{
margin: 0;
padding: 0;
height: 100%;
}
body{
background-color: #eee;
}
#wrapper{
height:calc(100% - 1px);
}
.card{
background-color: #fff;
height: 80px;
line-height: 80px;
text-align: center;
margin-bottom: 15px;
}
.loading{
height: 80px;
background-color: #e6e6e6;
line-height: 80px;
text-align: center;
}
Что я ожидал, так это то, что когда я прокручиваю до загрузочного div внизу документа, новые данные будут помещены в массив $ scope, и DOM repeat с помощью ng-repeat изменится в то же время, но этоне работает.
Данные списка могут быть зарегистрированы в console.log, но DOM не изменился
Демонстрация запуска: JS Bin