Как заменить элемент на 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)
    {

    }
};

мой-directive.html-включены через:

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

То, что я ищу, - это способ заменить <div>{{someData}}</div> <div ng-transclude></div>. Что происходит в настоящее время, это заключенный HTML помещается внутри элемента div ng-transclude.

Возможно ли это?

Ответы

Ответ 1

Я думаю, что лучшим решением, вероятно, будет создание вашей собственной директивы transclude-replace, которая бы справилась с этим. Но для быстрого и грязного решения вашего примера вы можете вручную разместить результат перехода, где хотите:

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

Ответ 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: вы также можете проверить эту ссылку, чтобы увидеть разницу между ng-transclude

Ответ 3

это работает в Angular 1.4.9 (и проблема ранее)

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