Angularjs 如何用ng transclude替换元素

是否可以将元素替换为其上的

ng transclude

，而不是整个模板元素

HTML:

<div my-transcluded-directive>
    <div>{{someData}}</div>
</div>

return {
    restrict:'A',
    templateUrl:'templates/my-transcluded-directive.html',
    transclude:true,
    link:function(scope,element,attrs)
    {

    }
};

<div>
    <div ng-transclude></div>
    <div>I will not be touched.</div>
</div>

<div>
    <span>I WILL BE REPLACED</span>
    <div>I will not be touched.</div>
</div>

return {
    restrict:'A',
    templateUrl:'templates/my-transcluded-directive.html',
    transclude:true,
    link:function(scope,element,attrs,ctrl, transclude)
    {
         element.find('span').replaceWith(transclude());
    }
};

my transcluded directive.html:

<div my-transcluded-directive>
    <div>{{someData}}</div>
</div>

return {
    restrict:'A',
    templateUrl:'templates/my-transcluded-directive.html',
    transclude:true,
    link:function(scope,element,attrs)
    {

    }
};

<div>
    <div ng-transclude></div>
    <div>I will not be touched.</div>
</div>

<div>
    <span>I WILL BE REPLACED</span>
    <div>I will not be touched.</div>
</div>

return {
    restrict:'A',
    templateUrl:'templates/my-transcluded-directive.html',
    transclude:true,
    link:function(scope,element,attrs,ctrl, transclude)
    {
         element.find('span').replaceWith(transclude());
    }
};

我不会被感动。

我正在寻找的是一种让

{{someData}}

替换

的方法。当前发生的情况是，转置的HTML被放置在

ng transclude

div元素中

---

这可能吗？

我认为最好的解决方案可能是创建自己的transclude replace指令来处理这个问题。但是，对于您的示例来说，如果要快速而肮脏的解决方案，您基本上可以手动将转换结果放置在您想要的位置：

my transcluded directive.html:

<div my-transcluded-directive>
    <div>{{someData}}</div>
</div>

return {
    restrict:'A',
    templateUrl:'templates/my-transcluded-directive.html',
    transclude:true,
    link:function(scope,element,attrs)
    {

    }
};

<div>
    <div ng-transclude></div>
    <div>I will not be touched.</div>
</div>

<div>
    <span>I WILL BE REPLACED</span>
    <div>I will not be touched.</div>
</div>

return {
    restrict:'A',
    templateUrl:'templates/my-transcluded-directive.html',
    transclude:true,
    link:function(scope,element,attrs,ctrl, transclude)
    {
         element.find('span').replaceWith(transclude());
    }
};

---

创建

ng transclude replace

指令很容易，这里是原始

ng transclude

的复制品

directive('ngTranscludeReplace', ['$log', function ($log) {
              return {
                  terminal: true,
                  restrict: 'EA',

                  link: function ($scope, $element, $attr, ctrl, transclude) {
                      if (!transclude) {
                          $log.error('orphan',
                                     'Illegal use of ngTranscludeReplace directive in the template! ' +
                                     'No parent directive that requires a transclusion found. ');
                          return;
                      }
                      transclude(function (clone) {
                          if (clone.length) {
                              $element.replaceWith(clone);
                          }
                          else {
                              $element.remove();
                          }
                      });
                  }
              };
          }]);

---

PS：您还可以查看Angular 1.4.9中使用的ng transclude和prob之间的差异

返回{
限制：'E'，
替换：正确，
模板：“”，
是的，
链接：功能（范围、el、属性）。。。。。。。。。
}

如果您不必支持IE和Edge，您可以在css中使用

显示：内容。这将破坏css级别的包装器

您可以在此处阅读有关此新显示属性的更多信息：

当前浏览器支持（希望将来看到边缘支持）：
对于我
元素
找到的是
div[my transcluded directive]
，而不是模板。@LittleBigBot如果你想发布小提琴，我会看一看，注意如果有一些指令，你需要编译内容：
.replacetwith（$compile（transclude（））（scope））
谢谢。如果某个子指令依赖于父指令，则此
replace
技巧将不起作用。@Jonny Henry Briggs您的小提琴似乎不包含“我不会被碰”元素。您的编译文件不报告该元素。所以有点不对劲：（谢谢！我一直在寻找一个可行的解决方案，它与使用转换的指令一起工作，但也是ng repeat的一部分。被接受的解决方案与ng repeat不起作用。我认为这与
终端：true
有关。最好的部分是此代码的用户不必知道它才能工作：）太棒了。正是我想要的。非常感谢。我想这应该是transclude的默认行为，而不是到处留下空的、无用的额外嵌套Dom元素！