角度嵌入不能按预期工作？答案

【问题标题】：Angular transclude not working as intended?角度嵌入不能按预期工作？
【发布时间】：2016-02-18 03:17:13
【问题描述】：

我正在尝试做一个非常简单的转换，导致一个带有文本“hi”的 div 出现在输入之后，只是为了在继续之前看到它正在工作。这是我使用指令的标记：

 <input id="zipCodeField" validated-field />

指令定义有transclude: true并使用这个模板：

<div>
    <div ng-transclude></div>
    <div>hi!</div>
</div>

我希望输入元素被嵌入到模板中 ng-transclude 的位置。相反，我得到了这个结果：

<input id="zipCodeField" validated-field>
    <div>
        <div ng-transclude></div>
        <div>hi!</div>
    </div>
</input>

我在这里做错了什么？这与我看到的例子一致。

【问题讨论】：

标签： angularjs

【解决方案1】：

我认为你误解了transclude。据我了解，transclude 获取元素的 contents（想想innerHTML）并将它们放在指令模板中的ng-transclude 中。它不占用整个元素本身 (outerHTML)。

所以，在你的例子中（假设指令是validated-field），你会这样做：

<div validated-field>
    <input id="zipCodeField" />
</div>

这应该会导致input 被放入ng-transclude 元素内的指令中。

【讨论】：

我明白你的意思。我试图找到一种方法让它以另一种方式工作。唔。这不是旧的replace 属性的用途吗？
@Aerovistae -- 有点像，但它并不是专门用于嵌入的。 replace 将删除指令被“调用”的元素，并将指令模板放在它的位置，使 DOM 更浅一层。实际上，我认为他们认为额外的嵌套级别无关紧要，这可能是性能或代码维护问题，因此他们决定放弃它。
我找到了解决方案！ groups.google.com/forum/#!topic/angular/wPkdNKW9flQ 必须在不使用 transclude 的情况下执行此操作。

【解决方案2】：

我不确定，但乍一看指令模板不应该是这样的

   <div>
        <ng-transclude></ng-transclude>
        <div>hi!</div>
   </div>

【讨论】：