AngularJS：ng-repeat中数字开头动态$scope名称异常问题

最初实现（非数字前缀ID可正常工作）：

$scope.FZLHIFSz7dVkbxZHP7Rg.allReplyActions = array1;
$scope.ykDP9cH5YFXv0Ki7sRAs.allReplyActions = array2;

<div class="sent-msg" ng-repeat="replyAction in FZLHIFSz7dVkbxZHP7Rg.allReplyActions | 
    orderBy:['ActionDate'] track by replyAction.ActionID ">

<div class="sent-msg" ng-repeat="replyAction in ykDP9cH5YFXv0Ki7sRAs.allReplyActions | 
    orderBy:['ActionDate'] track by replyAction.ActionID ">

当遇到数字开头的ID（如16cZAb4I5cAUKUKcarxG）时，出现语法错误：

Syntax Error: Token 'cZAb4I5cAUKUKcarxG' is unexpected, expecting []] at column 4 of the 
expression [[16cZAb4I5cAUKUKcarxG].allReplyActions | orderBy:['ActionDate']] starting at 
[cZAb4I5cAUKUKcarxG].allReplyActions | orderBy:['ActionDate']].

尝试改用括号语法后错误消失，但ng-repeat无法渲染数据（仅显示HTML注释）：

$scope['16cZAb4I5cAUKUKcarxG'].allReplyActions = array3;

<div class="sent-msg" ng-repeat="replyAction in ['16cZAb4I5cAUKUKcarxG'].allReplyActions | 
    orderBy:['ActionDate'] track by replyAction.ActionID ">

动态生成绑定的代码：

let tempChatHistory = $("#tempChatHistory").html();
let actionScope = angular.element("#" + initAction.ActionID).scope();

tempChatHistory = tempChatHistory.replace(/allReplyActions/g, "['" + initAction.ActionID + "'].allReplyActions");

console.log("tempChatHistory =", tempChatHistory);
actionScope["'" + initAction.ActionID + "'"] = {
   allReplyActions: await getReplyActions(initAction)
};

// 确认数据存在
console.log("actionScope.allReplyActions = ", actionScope["'" + initAction.ActionID + "'"].allReplyActions);

angular.element($chatWindow).append($compile(tempChatHistory)(actionScope));

actionScope.$apply();

核心问题有两个：

1. 模板表达式语法错误：['16cZAb4I5cAUKUKcarxG']在AngularJS表达式中代表数组，而非获取$scope上的属性，无法正确指向对应的数据。
2. $scope属性赋值错误：你给actionScope添加了带单引号的属性名（如'16cZAb4I5cAUKUKcarxG'），但模板中访问的是不带单引号的ID，导致数据匹配失败。

正确修改步骤： #

1. 用容器对象统一管理动态ID数据

避免直接在$scope上挂载零散的动态属性，创建一个容器对象（如chatActions）存储所有ID对应的数据，兼容任何格式的ID：

// 初始化容器（首次使用时创建）
if (!actionScope.chatActions) {
    actionScope.chatActions = {};
}

// 直接用ID作为属性键赋值
actionScope.chatActions[initAction.ActionID] = {
    allReplyActions: await getReplyActions(initAction)
};

2. 修改模板的ng-repeat表达式

将模板中的绑定改为访问容器对象下的属性，确保语法正确：

// 动态替换模板内容时，指向容器对象的属性
tempChatHistory = tempChatHistory.replace(/allReplyActions/g, "chatActions['" + initAction.ActionID + "'].allReplyActions");

对应的模板最终会被替换为：

<div class="sent-msg" ng-repeat="replyAction in chatActions['16cZAb4I5cAUKUKcarxG'].allReplyActions | 
    orderBy:['ActionDate'] track by replyAction.ActionID ">

3. 修复赋值时的键名错误

移除属性名中的多余单引号，直接用原始ID作为键：

// 错误写法：带单引号的键
// actionScope["'" + initAction.ActionID + "'"] = {...}

// 正确写法：直接使用ID作为键
actionScope.chatActions[initAction.ActionID] = {
   allReplyActions: await getReplyActions(initAction)
};

方案优势 #

• 容器对象的方式规避了JS标识符规则限制（数字开头的属性不能用.访问），所有格式的ID都能通过对象['属性名']正常访问。
• 代码结构更清晰，避免$scope上出现大量零散属性。

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