AngularJS ng-repeat未按预期工作：编程改数据后页面无更新

ng-repeat初始加载时正常显示数据，但通过编程方式修改$scope.data后，HTML视图完全没有同步更新。尝试过ng-bind和{{}}两种数据绑定方式，问题依然存在。相关代码如下：

初始HTML代码（index.html） #

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>App</title>
        <meta charset="UTF-8">
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
        
        <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
        <script type="text/javascript" src="main.js"></script>
    </head>
    <body>
        <div ng-app="app" ng-controller="main-app-ctrl">
            <div ng-repeat="dt in data" ng-click="change_data();">
                <h1 ng-bind="dt"></h1>
            </div>
        </div>
    </body>
</html>

AngularJS控制器代码（main.js） #

let app = angular.module('app', []);

app.run(function($rootScope, $window){
    
});

app.controller('main-app-ctrl', function($scope, $window){

    $scope.data = [1, 2];

    $scope.change_data = function()
    {
        $scope.data = [1, 2, 3, 4, 5];
    };
});

尝试的第二种HTML代码（使用插值语法） #

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>App</title>
        <meta charset="UTF-8">
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
        
        <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
        <script type="text/javascript" src="main.js"></script>
    </head>
    <body>
        <div ng-app="app" ng-controller="main-app-ctrl">
            <div ng-repeat="dt in data" ng-click="change_data();">
                <h1>{{ dt }}</h1>
            </div>
        </div>
    </body>
</html>

问题排查与解决 #

1. 代码逻辑本身的正确性 #

你提供的代码逻辑本身符合AngularJS规范：ng-click触发的函数属于Angular上下文，修改$scope.data后脏检查机制应自动触发视图更新。如果运行后无效果，先检查浏览器控制台：

• 确认AngularJS库是否成功加载（网络请求是否返回200）
• 检查是否有语法错误、变量名冲突（比如let是否在当前浏览器环境支持，AngularJS 1.6.9兼容ES6语法，现代浏览器均支持）

2. 强制触发脏检查（针对非Angular上下文修改） #

如果change_data通过原生JS事件（而非Angular指令）触发，或包含异步操作（如setTimeout），需手动触发脏检查：

$scope.change_data = function()
{
    // 异步操作示例
    setTimeout(function(){
        $scope.data = [1, 2, 3, 4, 5];
        // 手动触发脏检查
        $scope.$apply();
        // 或用$timeout替代setTimeout，自动触发脏检查
        // $timeout(function(){ $scope.data = [1,2,3,4,5]; });
    }, 1000);
};

3. 使用数组变异方法替代替换数组 #

虽然替换整个数组Angular能检测到，但使用数组变异方法（如push、splice）可避免特殊场景下的检测失效：

$scope.change_data = function()
{
    // 清空原数组并添加新元素
    $scope.data.length = 0;
    [1,2,3,4,5].forEach(item => $scope.data.push(item));
};

4. 确认控制器作用域 #

检查是否存在作用域继承问题，比如当前元素是否处于子作用域中，导致修改的不是目标$scope.data。可在视图中添加{{ data }}直接显示数组内容，确认数据是否真的被修改。

内容的提问来源于stack exchange，提问作者techNdoda