AngularJS中如何推送新模板？解决重复渲染旧模板问题

嘿，我来帮你解决这个头疼的问题！你现在每次添加新模板都得到之前的副本，核心原因是你每次push的都是同一个固定的模板字符串/指令名称，AngularJS会默认复用这个定义，导致看起来都是重复的。咱们调整下代码，就能让每次添加的都是独立的新模板实例：

先处理你用指令渲染的场景（就是conditions数组那部分） #

你之前的addCondition只是一个劲往数组里塞同一个字符串，AngularJS根本分不清这是新条目还是旧的。咱们改成给每个新条目加个唯一标识，让ng-repeat能认出这是全新的内容：

$scope.conditions = [];
// 换成带唯一ID的对象存，别只用字符串
$scope.addCondition = function () {
  $scope.conditions.push({
    id: Date.now(), // 用时间戳当唯一ID，或者整个自增数字也行
    directiveName: 'myCustomRowTemplate'
  });
};

然后HTML里的ng-repeat要加上track by来追踪这个唯一ID，确保每个条目都是独立渲染的：

<tr ng-repeat="condition in conditions track by condition.id">
  <!-- 如果是用指令直接渲染 -->
  <div my-custom-row-template></div>
  <!-- 或者用ng-switch来匹配指令名，灵活度更高 -->
  <div ng-switch="condition.directiveName">
    <div my-custom-row-template ng-switch-when="myCustomRowTemplate"></div>
  </div>
</tr>

这样每次添加的都是带唯一ID的新对象，ng-repeat会乖乖创建新的指令实例，不会再重复啦。

再处理模板字符串推送的场景（就是addNew方法那部分） #

你之前push的是固定死的模板字符串，哪怕内容一样，也可以给它加个唯一标记，让AngularJS认为这是新模板；或者用$compile手动编译，更靠谱：

方法1：给模板加个唯一标记（简单粗暴） #

$scope.addNew = function (personalDetail) {
  // 给模板加个唯一注释，让AngularJS觉得这是新内容
  const uniqueId = Date.now();
  $scope.personalDetails.push({
    add_template: `<!-- 唯一标记：${uniqueId} --><div my-custom-row-template></div>`
  });
};

就加个不起眼的注释，AngularJS编译的时候就会把它当成新模板，创建独立实例。

方法2：手动编译模板（更专业） #

如果你的模板需要动态逻辑，建议用AngularJS的$compile服务手动创建新DOM，这样完全可控：

// 记得在控制器里注入$compile和$rootScope哦
app.controller('你的控制器名', ['$scope', '$compile', '$rootScope', function($scope, $compile, $rootScope) {
  $scope.personalDetails = [];

  $scope.addNew = function () {
    // 给新模板创建独立作用域（可选，要是需要每个实例数据独立就加上）
    const newScope = $rootScope.$new();
    // 编译模板成DOM元素
    const compiledTemplate = $compile('<div my-custom-row-template></div>')(newScope);
    // 把编译好的DOM存到数组里，页面上就能渲染啦
    $scope.personalDetails.push({
      element: compiledTemplate
    });
  };
}]);

页面上可以用ng-repeat配合指令来插入这些编译好的DOM，比单纯推模板字符串灵活多了。

最后提个关键要点 #

• 不管哪种场景，ng-repeat里一定要加track by追踪唯一标识，不然AngularJS会偷懒复用旧DOM
• 如果你的自定义指令需要独立数据，记得把指令的scope设为{}，创建隔离作用域，这样每个实例的数据都是独立的

内容的提问来源于stack exchange，提问作者noobie-php