angular trasnclude 总是添加为 child，需要兄弟姐妹

Question

我想执行 element.insertAfter 的嵌入操作。我得到的基本上是 element.appendChild。我希望新元素与指令的元素共享相同的 parent。

我愿意

<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 } 意味着 "get everything from inside the element on which this directive is applied, and put it inside the element in the directive template on which ng-transclude is used"，在这种情况下什么都没有，因为里面什么都没有 <input with-button></input> （它没有children）。

angular trasnclude 总是添加为 child，需要兄弟姐妹

angular trasnclude always adds as child, sibling required

angularjs

angularjs-directive