AngularJS 在监听scroll事件函数中对ng-repeat遍历的数组添加数据时DOM无变化
在addEventListener('scroll')中对ng-repeat遍历的数组添加数据时，数据添加进去了，但DOM并未按预期增加遍历的节点，详见代码：
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) {
// 窗口底部
var windowBottom = e.target.documentElement.scrollTop + e.target.documentElement.clientHeight
// 加载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">加载中</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;
}程序预期是滑倒底部loading时向数组添加数据，然后DOM也跟着变化，但是并没有，在add()中加setTimeout也没用，很奇怪
运行示例：JS Bin
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（2）
add()方法是点击事件触发，你点一下，数据不就添加到DOM中了吗？angular 不会在
Event Handle方法里更新$scope，所以我们需要加上$scope.$apply()