How to replace the element with ng-transclude

Question

Is it possible to replace the element with ng-transclude on it rather than the entire template element?

HTML:

Answer 1

It's easy to create a ng-transclude-replace directive, here is a copycat of the original 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:you can also check this link to see the difference between the ng-transclude