javascript - AngularJS指令: How do I dynamically change the element html in an ng-repeat?

Question

我有一个 Angular Directive(指令)，我正在对其应用 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 使用新元素更新自身的能力。

Answer 1

与错误 https://github.com/angular/angular.js/issues/2151 有关。升级到最新版本 1.2.0 即可修复该问题。

顺便说一句，按钮应该放在 Controller 的范围内。希望这是一个错字。

Demo