요소를 ng-transclude로 대체하는 방법

요소를 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)
    {

    }
};

my-included-included.disples

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

제가 찾고 있는 것은,<div>{{someData}}</div>교체하다<div ng-transclude></div>. 현재 일어나고 있는 일은 트랜스코드된HTML이 내부로 배치되는 것입니다.ng-transcludediv 요소

그게 가능한가요?

이 문제를 해결할 수 있는 트랜슬루드-치환 디렉티브를 독자적으로 작성하는 것이 가장 좋은 해결책이라고 생각합니다.단, 이 예에 대한 빠르고 더러운 솔루션을 위해 기본적으로 트랜슬레이션 결과를 원하는 위치에 수동으로 배치할 수 있습니다.

my-included-included.disples

<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-replacedirective, 여기 원본의 복사본이 있습니다.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

이것은 Angular 1.4.9로 동작합니다(또한 이전 버전도 마찬가지입니다).

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

IE 및 Edge를 지원할 필요가 없는 경우display:contents당신의 css에.그러면 css 수준에서 래퍼가 파괴됩니다.

이 새로운 디스플레이 속성에 대한 자세한 내용은 https://css-tricks.com/get-ready-for-display-contents/를 참조하십시오.

현재 브라우저 지원(향후 Edge 지원 예정): https://caniuse.com/ #timeout=css-display-timeout

언급URL : https://stackoverflow.com/questions/21092885/how-to-replace-the-element-with-ng-transclude