Question

我想做一个等同于element.insertAfter的转录。我得到的基本上是element.appendChild。我希望新元素与指令元素共享同一个父元素。

我想

<div>
    <input with-button></input>
</div>

成为

<div>
    <input></input>
    <button></button>
</div>

但我改为

<div>
    <input>
        <button></button>
    </input>
</div>

我的指令模板看起来像

<ng-transclude></ng-transclude>
<button></button>

，指令看起来像

angular
    .module('appy')
    .directive('withButton', withButton);

function withButton() {
    return {
        restrict: 'A',
        transclude: true,
        templateUrl: 'path/to/template'
    };
}

根据文档，这应该有用。我错过了什么？

Answer 1

首先，您声明为指令模板的所有内容都将放在使用该指令的元素中。所以在你的情况下你的模板：

<ng-transclude></ng-transclude> <button></button>

将进入：

<input with-button></input>

所以，难怪按钮在输入内完成。

第二件事，设置{transclude：true}意味着“从应用此指令的元素内部获取所有内容，并将其放入使用ng-transclude的指令模板中的元素“，在这种情况下没有任何东西，因为里面什么也没有 <input with-button></input> （它没有孩子）。

角度转换总是作为孩子添加，兄弟姐妹需要

1 个答案: