AngularJS 指令：如何在 ng-repeat 中动态更改元素 html？答案

【问题标题】：AngularJS directives: How do I dynamically change the element html in an ng-repeat?AngularJS 指令：如何在 ng-repeat 中动态更改元素 html？
【发布时间】：2013-09-16 19:17:49
【问题描述】：

我有一个角度指令，我正在对其应用 ng-repeat。该指令的目的是用基于传递给原始指令的值的不同指令交换自身：

<content-type-directive type="item.type" ng-repeat="item in items"></content-type-directive>

变成

<type1-specific-directive></type1-specific-directive>
<type2-specific-directive></type2-specific-directive>
<type1-specific-directive></type1-specific-directive>
<type1-specific-directive></type1-specific-directive>
...

完整示例：http://jsfiddle.net/qPGZ8/6/

如果第二个指令的 html 可以在第一个指令的包装元素内呈现，这将是直截了当的，但在这种情况下，我需要它来实际替换原始项目。

这与Customizing the template within a Directive有关

在 Misko 的回答中，他解释说使用 element.replaceWith() 换出原始 html。当项目不在 ng-repeat 中时，这可以正常工作，但在 ng-repeat 中它会破坏 ng-repeat 使用新元素更新自身的能力。

【问题讨论】：

标签： javascript html angularjs angularjs-directive

【解决方案1】：

它与错误 https://github.com/angular/angular.js/issues/2151 有关。升级到最新版本1.2.0 即可解决。

顺便说一句，按钮应该放在控制器的范围内。希望是笔误。

Demo

【讨论】：

这确实是一个疏忽。谢谢你抓住它。但是，使用 append 对我不起作用，因为我需要将原始
元素替换为小提琴示例中的新
元素。
@kyleder 已更新。这是因为一个错误所以你需要升级到最新版本。
谢谢@sza。我tried this out 它确实有效，尽管它留下了原始元素的副本（不是什么大不了的事）。不幸的是，这是一个相当大的项目的一部分，在 Angular 开发人员发布稳定版本之前很难升级到 1.2。
@kyleder 没问题。试试 1.1.5。我不记得这个问题是什么时候得到解决的。祝你好运。
关于此解决方案需要注意的一点是，创建的元素有效地附加到父元素，这意味着从 ng-repeat 中删除元素不起作用。 ://