Angular.js: angular 1.2.18: transclude를 사용한 ng-repeat 문제

에 만든 2014년 06월 17일 · 48코멘트 · 출처: angular/angular.js

ng-transclude로 지시문에 전달할 때 반복하려는 참조 {{item}}가 있는 html 콘텐츠(지시어에 구현된 ng-repeat="item in collection"을 통해)는 버전 1.2.18에서 작동하지 않습니다.

http://embed.plnkr.co/EvzF25sPD3uZLQivDFqy/preview

출처

sergicontre

가장 유용한 댓글

내가 한 일은 $parent 사용하는 것뿐이었습니다. 너무 많은 것을 추가하지 않고도 바닐라에 가까운 옷장입니다.

그래서 나는 다음과 같은 것을 가지고 있습니다.

angular.module('test').directive('myDirectiveWithTransclusion', function() {
     return {
          restrict: 'E'
          transclude: {
               transcludeThis: 'transcludeThis'
          }
          template: "<div ng-repeat='item in array'><div ng-transclude='transcludeThis'></div></div>"
     }
})

<my-directive-with-transclusion>
     <transclude-this>
          {{$parent.item}}
     </transclude-this>
</my-directive-with-transclusion>

moneytree-doug 에 2016년 05월 04일

👍13 ❤8 🎉2

모든 48 댓글

오 법사. @petebacondarwin 이 중 하나를 수행하고 싶습니까? 이것은 실제로 "ng-transclude로 형제 범위를 만들지 마십시오"라는 것입니다. 단지 고장으로 인해 이 경우에 이전에 작동했을 뿐입니다.

caitp 에 2014년 06월 17일

Narretz 에 2014년 06월 17일

슬프게도 이것은 ng-transclude transclusion이 작동하는 방식이 아닙니다. 당신이 하려고 하는 것은 자식을 당신 자신의 지시문 내에서 스탬프 아웃할 내용의 "템플릿"으로 사용하는 컨테이너 지시문을 만드는 것입니다.

나는 과거에 이것을 몇 번 만났고 그것에 대해 Misko와 긴 토론을 했습니다. 트랜스클루드된 콘텐츠는 정의에 따라 지시문이 인스턴스화되는 장소의 범위에 바인딩됩니다. 지시문 템플릿의 범위가 아닙니다.

이전에는 중첩된 transclusion 시나리오와 관련된 일부 경우에 transclusion을 잘못된 범위에 실제로 바인딩했기 때문에 이것이 작동했을 수 있습니다.

따라서 실제로 여기에서 transclusion을 사용할 필요가 없습니다. 실제로 하려는 것은 내부 HTML을 자신의 템플릿에 삽입하는 것입니다. 다음과 같이 컴파일 함수에서 이 작업을 수행할 수 있습니다.

http://plnkr.co/edit/j3NwMGxkVRM6QMhmydQC?p=preview

app.directive('test', function(){

  return {
    restrict: 'E',
    compile: function compile(tElement, tAttrs, tTransclude) {

      // Extract the children from this instance of the directive
      var children = tElement.children();

      // Wrap the chidren in our template
      var template = angular.element('<div ng-repeat="item in collection"></div>');
      template.append(children);

      // Append this new template to our compile element
      tElement.html('');
      tElement.append(template);

      return {
        pre: function preLink(scope, iElement, iAttrs, crtl, transclude) {
            scope.collection = [1, 2, 3, 4, 5];
        },
        post: function postLink(scope, iElement, iAttrs, controller) {
          console.log(iElement[0]);
        }
      };
    }
  };
});

petebacondarwin 에 2014년 06월 18일

👍1

이것의 또 다른 예(나는 믿습니다):

Index.html:

<html ng-app='myApp'>

<head>
    <title>AngularJS Scopes</title>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.1/angular.min.js"></script>
    <script src='index.js'></script>
</head>

<body ng-controller='myController'>
    <people>Hello {{person.name}}</people>
</body>
</html>

index.js:

var myApp = angular.module( 'myApp', [] );

myApp.controller( 'myController', function( $scope ) {
    $scope.people = [
        { name: 'Rob'  },
        { name: 'Alex' },
        { name: 'John' }
    ];
});

myApp.directive( 'people', function() {
    return {
        restrict: 'E',

        transclude: true,
        template: '<div ng-repeat="person in people" ng-transclude></div>',
    }
});

Angular 1.2.1에서는 작동하지만 1.2.18에서는 작동하지 않습니다.

순진한 개발자는 위의 코드가 작동하기를 기대할 수 있습니다. 이 문서 는 다음과 같이 말합니다.

...때로는 문자열이나 개체가 아닌 전체 템플릿을 전달할 수 있는 것이 바람직합니다. "대화 상자" 구성 요소를 만들고 싶다고 가정해 보겠습니다. 대화 상자는 임의의 내용을 래핑할 수 있어야 합니다.

ngTransclude 문서 에서는 다음과 같이 말합니다.

transclusion을 사용하는 가장 가까운 부모 지시문의 transcluded DOM에 대한 삽입 지점을 표시하는 지시문. 이 지시문이 있는 요소의 기존 내용은 포함된 내용이 삽입되기 전에 제거됩니다.

이것은 @petebacondarwin 정의와 어떻게 다른

...자신의 지시문 내에서 스탬프 아웃할 내용의 "템플릿"으로 자식을 사용하는 컨테이너 지시문을 만듭니다.

나는 왜 transclusion이 여기에서 올바른 해결책이 아닌지 이해하지 못합니다. 무엇이든 템플릿 범위를 transclusion 기능에 주입하는 것과 관련된 합리적인 솔루션을 기대합니다.

Izhaki 에 2014년 07월 01일

차이점은 트랜스클루드된 콘텐츠가 "외부", 즉 <people> 요소가 있는 장소의 범위에 바인딩된다는 것입니다.
반면에 원하는 것은 인라인 템플릿이 "내부", 즉 지시문 범위에 바인딩되는 것입니다.
지시문이 자체 범위를 생성하지 않는 경우 이는 거의 동일합니다. 지시문이 격리 범위를 생성하는 경우, 예를 들어 이는 분명히 동일한 것이 아닙니다. 내부 범위는 외부 범위에 액세스할 수 없습니다.

petebacondarwin 에 2014년 07월 01일

템플릿 범위를 transclusion 기능에 실제로 주입하는 고유한 지시문을 만들 수 있다고 생각합니다...

petebacondarwin 에 2014년 07월 01일

http://plnkr.co/edit/IbNqR0854V8yXnajKSFB?p=preview 참조

petebacondarwin 에 2014년 07월 01일

당신이 말하는 것은 완벽합니다. 그러나 그것은 당신이 Angular의 깊이를 이해하는 경우에만 가능합니다. 내 요점은 위의 예가 너무 많은 추가 작업 없이 어떻게든 작동해야 한다는 것입니다.

내가 보기엔 트랜스클루전 기능이 템플릿(또는 '내부') 범위에 어떻게든 액세스할 수 있다는 점에서 매우 합리적이고 매우 실용적입니다. 왜 이것이 필요한지 많은 경우를 생각할 수 있습니다.

동일한 문제가 이 블로그에 설명되어 있습니다. 점점 더 많은 사람들이 현재 상황에 대해 불평할 것이라고 생각합니다(이 행동의 결과로 Github에 이미 많은 관련 문제가 있습니다).

Izhaki 에 2014년 07월 01일

그리고 코드에 대해 대단히 감사합니다. 다른 사람들의 이익을 위해 여기에 복제하고 있습니다.

var myApp = angular.module( 'myApp', [] );

myApp.controller( 'myController', function( $scope ) {
    $scope.people = [
        { name: 'Rob'  },
        { name: 'Alex' },
        { name: 'John' }
    ];
});

myApp.directive( 'people', function() {
    return {
        restrict: 'E',
        transclude: true,
        template: '<div ng-repeat="person in people" inject></div>'
    }
});

myApp.directive('inject', function(){
  return {
    link: function($scope, $element, $attrs, controller, $transclude) {
      if (!$transclude) {
        throw minErr('ngTransclude')('orphan',
         'Illegal use of ngTransclude directive in the template! ' +
         'No parent directive that requires a transclusion found. ' +
         'Element: {0}',
         startingTag($element));
      }
      var innerScope = $scope.$new();
      $transclude(innerScope, function(clone) {
        $element.empty();
        $element.append(clone);
        $element.on('$destroy', function() {
          innerScope.$destroy();
        });
      });
    }
  };
});

Izhaki 에 2014년 07월 01일

👍9 ❤3

:-) 트랜스클루전은 머리를 긁적이거나 키보드를 두드리는 일 없이는 이해하기 쉬운 주제가 아니라는 데 동의합니다.
ng-transclude가 트랜스클루드된 콘텐츠를 "외부" 범위에 바인딩한다는 사실에 대해 문서를 더욱 명확히 해야 합니까?

petebacondarwin 에 2014년 07월 01일

개인적으로, 적어도 이 중요한 페이지 에 있는 현재 문서가 상당히 명확하고 명확하다고 생각합니다.

이 transclude 옵션은 정확히 무엇을 합니까? transclude는 이 옵션이 있는 지시문의 내용이 지시문 내부가 아닌 외부 범위에 액세스할 수 있도록 합니다.

(그리고 뒤따르는 모든 것이 이것을 더 잘 보여줍니다).

나는 아마도 당신이 프레임워크에 제공한 지시문을 추가하는 것을 고려할 것입니다. 아마도 그것을 'ng-transclude-internal'로 브랜드화할 것입니다. 나는 'transcope'라는 지시문을 가지고 이것에 도전한 사람을 최소한 한 명 더 알고 있습니다.

Izhaki 에 2014년 07월 01일

솔루션을 시도했지만 다른 문제에 직면했습니다. 왜 ng-repeat 상위 범위가 지시문 범위가 아닙니다.

http://plnkr.co/edit/7j92IC?p=preview

luboid 에 2014년 07월 01일

@luboid 플런커 에서 작동하지 않는 이유는 지시문에 격리 범위가 있고 수정된 컴파일된 DOM(이 작업을 수행하지 마십시오. 이 문제를 해결하는 어리석은 방법임)이 사용하기 때문입니다. 격리 범위 부모의 형제입니다.

예상대로 작동하도록 하는 적절한 방법의 예를 추가하겠습니다. (그러나 이것은 일반적으로 여전히 꽤 끔찍한 디자인이므로 이것을 할 이유가 없습니다)

caitp 에 2014년 07월 01일

사실, ng-repeat 또는 다른 요소 transclusion 지시문을 사용하면 실제로 이것을 고칠 수 없다고 생각해 보십시오. 예, 버전 1.2.0 이후로는 작동하지 않습니다.

caitp 에 2014년 07월 01일

@petebacondarwin 정말 초보자 질문입니다. 다음 대신 var innerScope 를 사용하는 이유:

myApp.directive( 'inject', function() {
    return {
        link: function( $scope, $element, $attrs, controller, $transclude ) {
            if ( !$transclude ) {
                throw minErr( 'ngTransclude' )( 'orphan',
                    'Illegal use of ngTransclude directive in the template! ' +
                    'No parent directive that requires a transclusion found. ' +
                    'Element: {0}',
                    startingTag( $element ));
            }

            $transclude( $scope, function( clone ) {
                $element.empty();
                $element.append( clone );
            });
        }
    };
});

Izhaki 에 2014년 07월 01일

새로운 요소를 컴파일하려는 경우 일반적으로 새 범위를 만드는 것이 가장 좋습니다. 원래 지시문이 범위를 생성하려는 복잡한 지시문과 함께 배치되어 있는지 확실하지 않기 때문입니다. 그러나 다음을 얻을 수 있습니다. 여기서 그만...

petebacondarwin 에 2014년 07월 01일

도움에 감사드립니다,
나는 외부 템플릿($templateCache)을 사용할 것입니다. 그런 다음 작업이 조금 단순해집니다. 기본 템플릿은 지시문 범위로 컴파일됩니다.

luboid 에 2014년 07월 01일

@Izhaki @petebacondarwin 포함 지시문에 감사드립니다. 마침내 1.2.16에서 1.2.20으로 업데이트되었으며 내 앱이 왜 그렇게 어렵게 시작되었는지 확인하는 데 약간의 시간이 걸렸습니다.

이 스레드를 찾기 전에는 트랜스클루전이 매우 간단한 개념이라고 생각했습니다. 아니요.

kencaron 에 2014년 07월 14일

이 문제를 해결하는 데 도움을 주신 모든 분들께 감사드립니다. 1.2.21로 업데이트하면 여기에 설명된 문제로 인해 많은 인터페이스가 손상되었으며 이제 올바른 방향으로 가고 있습니다.

@caitp @petebacondarwin : 두 가지 추가 정보를 얻을 수 있다면 매우 도움이 될 것입니다.

"버전 1.2.0"(Caitlin이 말한 대로) 어딘가에서 발생한 어떤 주요 변경 사항이 이 접근 방식을 갑자기 폭발시켰습니까? 더 이상 작동하지 않는 것은 이해하지만 해당 릴리스 근처의 변경 로그에서 이 특정 문제와 상관관계가 있는 것으로 보이는 특정 항목을 볼 수 없습니다.
임의의 내부 콘텐츠가 상속될 수 있는 격리되고 재사용 가능한 컨테이너를 원하는 경우 최종 사용자가 ng-transclude 대신 사용해야 하는 대체 접근 방식은 무엇입니까? 예: 인터페이스조차 가변적이고 완전히 데이터 기반인 대규모 다중 테넌트 애플리케이션. 따라서 데이터를 검색하여 스스로 채운 다음 일관된 상호 작용/동작을 가져야 하는 목록 컨트롤과 같은 항목이 있습니다. 우리는 그러한 것들을 제공하는 래퍼 지시문을 표준화할 수 있기를 원합니다. 그러나 목록 항목(내부 지시문을 포함할 수 있음)에 사용하는 템플릿은 상황에 따라 다릅니다. 그리고 목록은 목록을 생성하는 데이터의 트리 구조를 기반으로 반복적으로 중첩되는 경우가 많습니다. 따라서 이러한 중첩 목록에 대한 격리가 필요합니다. 우리는 모든 코드를 제어하므로 내부와 외부를 분리하기 위해 transclusion을 사용하지 않습니다. 오히려 우리는 지침 가이드에서 명시적으로 권장된 대로 컨테이너 및 임의의 콘텐츠에 대한 훌륭하고 선언적인 접근 방식을 따르고 있습니다. 인라인 템플릿에서 멀어지게 하여 관용적이지 않게 느껴지더라도 ng-include가 지금 더 나은 옵션(컨테이너 선언의 속성으로 내부 템플릿 경로 전달)입니까?

xml 에 2014년 08월 04일

더 이상 작동하지 않는 것은 이해하지만 해당 릴리스 근처의 변경 로그에서 이 특정 문제와 상관관계가 있는 것으로 보이는 특정 항목을 볼 수 없습니다.

https://github.com/angular/angular.js/blob/master/CHANGELOG.md#120 -timely-delivery-2013-11-08

나는 특히 이것들을 언급하고 있었다

격리 지시문(d0efd5ee)에 속하는 자식에게만 격리 범위를 전달합니다.
격리 범위를 진정으로 격리시키십시오(909cabd3, #1924, #2500).

근데 ヽ༼ຈل͜ຈ༽ﾉ 내가 무슨 말을 했는지 이젠 기억도 안 난다.

caitp 에 2014년 08월 04일

변경 로그에는 변경 및 주요 변경이라는 두 가지 종류의 메시지만 있습니다. 이것은 주요 변경 사항이 아니라 버그 수정으로 간주되었습니다. 많은 사람들이 이 동작을 사용했다고 예측하기 어려웠습니다. 그러나 아마도 마이그레이션 문서에 들어가야 할 것입니다(사랑이 필요함)

Narretz 에 2014년 08월 04일

쇼' '너프. 그 사람들입니다. 나는 transclusion과 관련된 변화를 찾고 있었지만 이것은 분명히 transclusion에 부수적인 격리 범위의 변화입니다. 감사 해요!

xml 에 2014년 08월 04일

이 변경으로 인해 코드도 손상되었습니다. 해당 지시문의 person 변수에 액세스하고 상위 범위에서 사용하는 쉬운 선언적 방법이 있으면 좋을 것입니다. 이 bug 가 1.2.18에서 수정되기 전에 얼마나 많은 사람들이 그것을 사용했는지 보니 일반적인 사용 사례인 것 같습니다.

다음은 1.2.17에서 작동하고 1.2.18 이후 중단된 데모입니다.

http://plnkr.co/edit/QswOxN?p=preview

evgenyneu 에 2014년 08월 18일

@evgenyneu : 내부 콘텐츠와 컨테이너 지시문을 모두 제어한다고 가정하면

내부 콘텐츠 템플릿이 뷰 템플릿에 인라인되도록 하려면 ng-template을 사용하여 이전에 사용했던 것과 동일한 위치에 템플릿을 래핑하면 됩니다.

xml 에 2014년 08월 18일

@xmlilley , 훌륭한 팁, 정말 감사합니다. 그것은 실제로 가장 깨끗한 접근 방식입니다.

데모는 다음과 같습니다. http://plnkr.co/edit/4MwEL3?p=preview

evgenyneu 에 2014년 08월 18일

여러분이 대신 이것을 할 수 있다는 것을 알고 있습니다. http://plnkr.co/edit/fw7thti1u4F9ArxsuYkQ?p=preview --- 완벽하지는 않지만 당신을 거기에 데려다줍니다.

caitp 에 2014년 08월 18일

@caitp , 감사합니다. 우리는 많은 솔루션을 가지고 있습니다!

evgenyneu 에 2014년 08월 18일

이 문제를 보고 있는 사람들을 위해 '향상된' ng-transclude 지시문을 만들었습니다. 속성 값은 찾는 내부 범위를 정의하고 다음 3가지 중 하나가 될 수 있습니다.

silbing - transclusion 이 발생하는 요소의 형제 범위입니다. 그것이 현재의 ng-transclude 동작입니다.
parent - 트랜스클루드 콘텐츠 범위는 트랜스클루전이 발생하는 요소의 범위입니다.
자식 - 트랜스클루드된 콘텐츠 범위는 트랜스클루전이 발생하는 요소 범위에 대한 자식 범위입니다.

사용 예:

template: 
  '<div ng-transclude="parent">' +
  '</div>'

전체 예

모든 예를 보려면 이 plunk 를 참조하십시오.

출력은 다음과 같습니다.

원천

.config(function($provide){
    $provide.decorator('ngTranscludeDirective', ['$delegate', function($delegate) {
        // Remove the original directive
        $delegate.shift();
        return $delegate;
    }]);
})

.directive( 'ngTransclude', function() {
  return {
    restrict: 'EAC',
    link: function( $scope, $element, $attrs, controller, $transclude ) {
      if (!$transclude) {
        throw minErr('ngTransclude')('orphan',
         'Illegal use of ngTransclude directive in the template! ' +
         'No parent directive that requires a transclusion found. ' +
         'Element: {0}',
         startingTag($element));
      }

      var iScopeType = $attrs['ngTransclude'] || 'sibling';

      switch ( iScopeType ) {
        case 'sibling':
          $transclude( function( clone ) {
            $element.empty();
            $element.append( clone );
          });
          break;
        case 'parent':
          $transclude( $scope, function( clone ) {
            $element.empty();
            $element.append( clone );
          });
          break;
        case 'child':
          var iChildScope = $scope.$new();
          $transclude( iChildScope, function( clone ) {
            $element.empty();
            $element.append( clone );
            $element.on( '$destroy', function() {
              iChildScope.$destroy();
            });            
          });
          break;
      }
    }
  }
})

Izhaki 에 2014년 08월 26일

👍1

@Izhaki - FWIW, +10. 현재 규칙을 위반하지 않지만 공통 사용 사례에 자발적으로 액세스하는 깨끗하고 선언적인 방법을 추가합니다. 감사 해요!

xml 에 2014년 08월 27일

:+1: @Izhaki 의 솔루션을 위해. 그대로 사용하겠지만 앵귤러에 포함되어 있으면 훨씬 편할 것 같아요.

ziadsawalha 에 2014년 09월 11일

heycalmdown 에 2014년 09월 17일

@Izhaki +1, 좋은 예입니다!

SebastianM 에 2014년 09월 17일

사용자 정의 transclude 지시어에 감사드립니다. 기본값을 재정의하는 대신 별도의 사용자 정의 transclude를 만들었습니다. 패치에 몇 가지 함수 호출이 있는데 어디서 왔는지 모르겠습니다. minErr() 및 startingTag()

dehru 에 2014년 09월 19일

@dehru - 이 함수는 AngularJS 내부에 있습니다.

petebacondarwin 에 2014년 09월 20일

@Izhaki 정말 감사합니다! 관심 있는 사람이 있으면 포함된 콘텐츠를 반복하는 귀하의 plunk를 분기했습니다.
ng-transclude="parent"가 예상대로 작동하지 않을 수 있다는 점을 언급할 가치가 있습니다.
http://plnkr.co/edit/S6ngqz?p=preview

plunker_ng-transclude_ng-repeat

thevictor13 에 2014년 09월 20일

@Izhaki 아주 좋습니다.
각도에 대한 pull 요청에 있어야 할 것 같습니다.
적어도 Github repo가 있는 별도의 지시문에서 게시할 수 있다고 생각하십니까(그래서 일부 변경 사항을 제공할 수 있습니다....)?
감사 해요

Urigo 에 2014년 09월 21일

https://github.com/Izhaki/ngTranscludeMod

Izhaki 에 2014년 09월 23일

이자키, 굉장해. 나는 당신을 _심장_합니다.

elbow-jason 에 2014년 10월 30일

@Izhaki 이것은 자식 범위 문제에 대한 아주 좋은 해결책입니다. 감사 해요.

나는 혼란스러워서 $transclude 함수의 상속이 외부 지시문에서 ngTransclude 지시문으로 어떻게 전달되는지 설명할 수 있는지 궁금합니다. 내가 찾을 수있는 공식 어디에서나 명시 적으로 언급되어 있지 않지만 링크 기능에서 $transclude 기능을 사용하려면 지시문에 transclude: true 를 사용해야한다고 가정했습니다. 코드를 조금 가지고 놀다가 transclude: true 실제로 코드가 깨집니다. 무슨 일이야?

evanyeung 에 2014년 11월 14일

나는 며칠 동안 이것과 싸웠고, transclude가 transclude 요소를 대체하는 대신 transclude 자리 표시자 안에 삽입한다는 사실과 싸웠습니다.

ng-transclude-replace가 두 가지 문제를 모두 처리한다는 것을 발견했습니다! http://gogoout.github.io/angular-directives-utils/#/api/ng -directives-utils.transcludeReplace

ng-repeat 지시문을 반복 지시문 자체 또는 그와 유사한 것으로 전파할 필요가 없습니다! 모든 유효성 검사/바인딩을 포함하여 모두 작동하는 것으로 보입니다.

다음은 내 코드의 일부입니다.

<form-field label="Roles" required>
    <checkbox-group>
        <checkbox ng-repeat="role in roles" label="{{role.description}}">
            <input type="checkbox" name="selectedRoles" ng-model="role.selected" value="{{role.description}}" ng-required="!hasRole" />
        </checkbox>
    </checkbox-group>
</form-field>

abobwhite 에 2014년 12월 09일

@abobwhite ng- 해주셔서 감사합니다.

aparij 에 2015년 05월 28일

최근에 이 문제가 발생했습니다. @Izhaki 가 저를 위해 일한 동안 이 토론 이후 시간에 모범 사례가 나타 ng-transclude="sibling | parent | child" 를 앵귤러 코어의 일부로 만드는 데 관심이 있었나요?

telekid 에 2016년 04월 26일

@telekid - 현재로서는 이 기능을 코어에 포함할 계획이 없습니다.

petebacondarwin 에 2016년 04월 26일

솔루션과 해결 방법이 있지만 지시문 내부 범위에 액세스할 수 있는 방법이 있으면 매우 편리할 것입니다.

moneytree-doug 에 2016년 05월 03일

@Izhaki가 생성한 트랜스클루전과 함께 작동하도록 했음을 지적하고
분기: https://github.com/NickBolles/ngTranscludeMod/tree/Angular1.5-multi-slot
홍보: https://github.com/Izhaki/ngTranscludeMod/pull/2
플런커: http://plnkr.co/edit/5XGBEX0muH9CSijMfWsH?p=preview

NickBolles 에 2016년 05월 03일

내가 한 일은 $parent 사용하는 것뿐이었습니다. 너무 많은 것을 추가하지 않고도 바닐라에 가까운 옷장입니다.

그래서 나는 다음과 같은 것을 가지고 있습니다.

angular.module('test').directive('myDirectiveWithTransclusion', function() {
     return {
          restrict: 'E'
          transclude: {
               transcludeThis: 'transcludeThis'
          }
          template: "<div ng-repeat='item in array'><div ng-transclude='transcludeThis'></div></div>"
     }
})

<my-directive-with-transclusion>
     <transclude-this>
          {{$parent.item}}
     </transclude-this>
</my-directive-with-transclusion>

moneytree-doug 에 2016년 05월 04일

👍13 ❤8 🎉2

안녕하세요 @moneytree-doug : 귀하가 제공한 이 솔루션을 사용하지만 transclude의 범위를 찾았습니다. 이것은 ng-repeat에 의해 생성된 새 범위의 자식이 아니라 여전히 지시적 범위입니다. 몇 가지 제안을 해주실 수 있나요?

sy-tian 에 2017년 01월 05일

@szetin 당신이 기대하는 것과 무슨 일이 일어나고 있는지 보여주는 jsfiddle을 올려 주시겠습니까?

moneytree-doug 에 2017년 01월 10일

이 페이지가 도움이 되었나요?

0 / 5 - 0 등급