AngularJS修改Array后data-ng-repeat视图未更新问题求助

问题现象 #

开发的自定义指令mx-note-manager-two通过ng-repeat="message in MessageList"绑定数据渲染留言，页面首次加载时控制器调用API赋值$scope.MessageList，视图显示正常；但修改$scope.MessageList（如清空后重新赋值新数据）时，视图无法同步更新，尝试$scope.$apply()、$timeout、angular.extend等方案均无效。

相关代码 #

指令使用代码 #

<mx-note-manager-two isModalPopup="true" is-show-date-range="{{IsShowNoteDateRangeControl}}" recordType="BOM_Header" recordId="{{UniqKey}}" note-save-success-call="CheckItemLevelData" noteLabel={{translation.BOMNote}} record="{{SummaryGridPartNumber}}"></mx-note-manager-two>

ng-repeat渲染代码 #

<div data-ng-repeat="message in MessageList" ng-class="!$first ? 'padding-top2px padding-left2px' :''">
... <!-- 留言内容展示代码 -->
</div>

API数据赋值代码 #

MXNoteService.getMxTwoNotes('api/MXNote/GetMxTwoNotes', { params: { recordType: $scope.RecordType, recordId: $scope.RecordId, NoteCategory: 2 } }).then(function (responseData) {
...
$scope.MessageList = responseData.data.responseObject[0].ListOfNotes
...
if ($scope.IsFocus) {
setTimeout(function () {
$('#note-text-area').focus();
$scope.$apply();
}, 0);
}
...
}

指令定义代码 #

directive('mxNoteManagerTwo', function ($rootScope, MXNoteService) {
        return {
            restrict: 'E',
            templateUrl: function (element, attributes) {
                if (!$rootScope.IsNullOrUndefined(attributes.ismodalpopup) && attributes.ismodalpopup === 'true') {
                    return 'SinglePageApp/GenericControls/MXNoteManager/MXNote2Model.html';
                } else {
                    return 'SinglePageApp/GenericControls/MXNoteManager/MXNote2.html';
                }
            },
            scope: {
                recordType: '@',
                recordId: '@',
                isEdit: '@',
                isShowDateRange: '@',
                isShowHeader: '@',
                isEditDisable: '@',
                isShowAttachment: '@',
                isAddAttachment: '@',
                record: '@',
                keyValue: '@',
                isShowCamera: '@',
                isFocus: '@'
            },
            link: function (scope, element, attrs) {
                // 属性赋值逻辑
                //...
                MXNoteService.setValues = function (record, recordId, title, moduleName, isEdit) {
                    scope.Record = record;
                    scope.RecordId = recordId;
                    scope.NoteLabel = title ? title : scope.NoteLabel;
                    scope.RecordType = moduleName ? moduleName : scope.RecordType;
                    scope.IsEdit = !$rootScope.IsNullOrUndefined(isEdit) ? isEdit : scope.IsEdit;
                    scope.GetMxTwoNotes(scope.RecordType, scope.RecordId);
                }
                setTimeout(function () {
                    scope.GetMxTwoNotes();
                }, 500);
            },
            controller: 'MXNote2Controller',
        }

问题根源 #

1. 非Angular上下文操作未触发Digest循环：代码中使用原生setTimeout调用GetMxTwoNotes，以及仅在$scope.IsFocus为true时才手动调用$scope.$apply()，导致大部分场景下$scope.MessageList赋值后未触发Angular的变更检测，视图无法更新。
2. 未确认API请求是否在Angular上下文执行：若MXNoteService.getMxTwoNotes未使用Angular的$http服务，而是原生XHR/fetch，其回调函数不在Angular上下文内，赋值操作不会自动触发变更检测。

解决方案 #

1. 替换原生setTimeout为Angular的$timeout #

$timeout会自动触发Digest循环，无需手动调用$scope.$apply()：

修改指令link中的延迟调用：

// 原代码
setTimeout(function () {
    scope.GetMxTwoNotes();
}, 500);

// 修改后（需在指令依赖中注入$timeout）
directive('mxNoteManagerTwo', function ($rootScope, MXNoteService, $timeout) {
    // ...
    link: function (scope, element, attrs) {
        // ...
        $timeout(function () {
            scope.GetMxTwoNotes();
        }, 500);
    }
})

修改API赋值中的焦点设置：

// 原代码
if ($scope.IsFocus) {
setTimeout(function () {
$('#note-text-area').focus();
$scope.$apply();
}, 0);
}

// 修改后（需在控制器中注入$timeout）
if ($scope.IsFocus) {
$timeout(function () {
$('#note-text-area').focus();
});
}

2. 确保数据赋值触发变更检测 #

若API请求未使用$http，需将赋值操作包裹在$scope.$apply()中，确保触发Digest循环：

MXNoteService.getMxTwoNotes('api/MXNote/GetMxTwoNotes', { params: { recordType: $scope.RecordType, recordId: $scope.RecordId, NoteCategory: 2 } }).then(function (responseData) {
...
$scope.$apply(function() {
    $scope.MessageList = responseData.data.responseObject[0].ListOfNotes;
});
...
}

3. 验证API服务实现 #

检查MXNoteService.getMxTwoNotes是否基于Angular的$http实现，若使用原生请求，建议改用$http或用$q包装Promise，确保回调在Angular上下文执行。

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