AngularJS控制器创建动态HTML：解决旧数据被新数据覆盖问题

看起来你现在是在手动拼接HTML字符串来展示通知，但这种方式不仅容易出错，还会导致旧数据被新数据覆盖——本质原因是你每次请求后可能直接替换了DOM内容，而且没有用数组来维护历史数据。其实AngularJS的核心是数据驱动视图，完全不需要手动拼HTML，用它自带的指令就能轻松解决这个问题。

问题根源拆解 #

1. 你直接给$scope.datas赋值，每次请求新数据都会覆盖旧数据，而不是追加
2. 手动拼接HTML字符串并插入DOM，没有利用Angular的模板系统，既容易写错，又无法自动维护数据和视图的关联

正确的实现方式 #

第一步：用数组维护所有通知数据

在控制器里定义一个数组，用来存储所有加载完成的通知（包括新的和旧的），每次请求成功后把新数据追加到数组里，而不是覆盖：

// 初始化数组，用来存所有通知
$scope.notifications = [];

// 封装加载通知的函数
$scope.loadNotification = function(postid, postrplyid, toppos) {
    $http.post("getnotifierdis", {
        "postid": postid,
        "postreplyid": postrplyid
    }).then(function(result) {
        // 把新数据和需要的样式参数一起存入数组
        $scope.notifications.push({
            // 假设result.data是接口返回的通知详情
            detail: result.data,
            // 动态样式参数
            marginTop: toppos,
            // 用postreplyid当唯一标识比随机数更可靠
            uniqueId: postrplyid
        });
    });
};

第二步：用ng-repeat在视图中渲染所有通知

把手动拼接的HTML改成Angular模板，用ng-repeat遍历数组，自动生成每个通知的DOM，还能通过ng-style、ng-class动态绑定样式：

<!-- 用ng-repeat循环渲染每个通知，track by避免重复渲染 -->
<div class="notifier notice{{item.uniqueId}}" 
     ng-repeat="item in notifications track by item.uniqueId"
     id="{{item.uniqueId}}"
     ng-style="{'margin-top': item.marginTop + 'px'}">
    <div class="replyhere">
        <div class="col-sm-11 no-padding">
            <!-- 这里直接绑定数据，比如通知内容、作者等 -->
            {{item.detail.content}}
            <p>回复者：{{item.detail.author}}</p>
            <!-- 其他内容根据你的接口返回数据结构绑定即可 -->
        </div>
    </div>
</div>

为什么这样做更好？ #

• 不会覆盖旧数据：数组notifications会持续累加新数据，ng-repeat会自动渲染所有条目
• 避免手动DOM操作：完全由Angular维护数据和视图的关联，减少出错概率
• 更安全：Angular会自动处理数据转义，避免XSS风险（手动拼HTML很容易踩这个坑）
• 更易维护：模板和数据分离，后续修改样式或数据展示逻辑会更简单

额外提醒 #

如果你的接口返回的是多条通知，记得用Array.prototype.concat把新数组和旧数组合并，而不是单条push；另外track by一定要用唯一标识（比如postreplyid），不要用随机数，避免重复渲染或DOM混乱。

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