Question

是否可以用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)
    {

    }
};

我-transcluded-directive.html：

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

我正在寻找的方法是<div>{{someData}}</div>替换<div ng-transclude></div>。目前发生的是被转换的HTML被放置在里面 ng-transclude div元素。

这可能吗？

Answer 1

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

我-transcluded-directive.html：

<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()); } };

Answer 2

创建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：您还可以查看this link以查看ng-transclude

之间的区别

Answer 3

这适用于Angular 1.4.9（也可能更早）

return {
      restrict: 'E',
      replace: true,
      template: '<span data-ng-transclude></span>',
      transclude: true,
      link: function (scope, el, attrs) .........
}

Answer 4

如果您不必支持IE和Edge，则可以在css中使用display:contents。这将破坏css级别的包装器。

您可以在此处阅读有关此新显示属性的更多信息： https://css-tricks.com/get-ready-for-display-contents/

当前的浏览器支持（希望将来能看到Edge支持）： https://caniuse.com/#feat=css-display-contents

如何用ng-transclude替换元素

4 个答案: