Transclude는 어디에서 새 범위를 생성합니까? http://plnkr.co/edit/EuHaBR26JgAegQKvwOGH?p=preview 보이지 않습니다

ng-transclude 지시문에 대해 이야기하고 있습니다. 귀하의 예에서 당신이 가진 것은 정확히 내 작업이 수행하는 것입니다.

이것은 유효한 요청입니다. 우리는 이것을 1.2에 대해 고려하고 있었지만 최종 릴리스에 가까워지고 있었고이 주요 변경 사항을 도입하고 싶지 않았습니다.

1.3에 대해 고려해야합니다.

잘 했어! 나는 당신이 이미 그것을 고려하고 있다는 것이 기쁩니다.

이것에 대한 +1. 내 문제는 이것과 관련이 있다고 생각합니다 : 양식이있는 지시문에서 ng-transclude를 사용하고 양식 유효성 검사 개체에 액세스하기 위해 scope. $$ childHead를 통과해야하지만 모델에 액세스하는 데 문제가 없습니다.

예 : http://fiddle.jshell.net/39cgW/3/

오늘이 문제에 +1하고 있으며 $parent 모든 곳에 던지는 것을 싫어합니다.

따라서 이에 대한 해결책을 찾기 위해서는 두 가지 가능성이있는 것 같습니다.

1) ngTransclude 지시문을 변경하여 범위를 지정하십시오 (실제로 이것보다 훨씬 더 많이 축소 될 수 있습니다 .--- 컨트롤러가 필요하지 않습니다)

또는

2) 범위가 지정되지 않은 경우 새 범위를 만들지 마십시오.

따라서 옵션 1)을 사용하여 몇 바이트를 절약 할 수 있으며 좋습니다. 2) 가장 작은 솔루션 (3 줄 삭제 정도)이 될 수 있으며 새 범위를 만드는 것이 암시 적으로 의미가있는 사용 사례가 있다는 것이 분명하지 않습니다 ( 있을 수 있지만 문서에서 초월이 설명되는 방식과 완전히 반대되는 것 같습니다.)

또는 매우 멋지게 만들고 싶다면 ngTransclude가 속성 값을 통해 새 범위를 원할지 여부를 지정하도록 허용하여 변경 사항을 완전히 중단하지 않을 수 있습니다.

생각?

나는 당신의 1과 2의 차이를 이해하지 못합니다!

내 의견 일 뿐이지 만이 변경에는 하위 호환성이 중요 할 것이라고 생각합니다. $ parent 및 scope. $$ childHead와 같은 것을 사용 하여이 범위 문제를 해결 한 많은 앱이 있다고 생각합니다. 이 동작을 변경하는 모든 업데이트는 약간의 두통을 유발할 것입니다 (하지만 나중에 두통을 일으키는 것이 더 낫습니다).

즉, 이론적 관점에서 ng-tranclude가 기본적으로 지시문과 동일한 범위를 갖는 것이 더 합리적이라고 생각합니다. 콘텐츠를 배제하는 요점은 콘텐츠의 원활한 부분을 원한다는 것입니다. transcludes가있는 지시문의 중첩이 많지만 여전히 하나의 큰 구성 요소로 동작하기를 원할 때가 있습니다. 스코프가 모두 다르면 매우 까다 롭습니다.

내 생각뿐입니다. 최소한 옵션을 갖는 것은 현재 상황보다 한 단계 위 단계가 될 것입니다. :)

@troch 를 명확히하기 위해 ngTranscludeDirective의 컨트롤러에 다음을 삽입합니다.

        // This is the function that is injected as `$transclude`.
        function controllersBoundTransclude(scope, cloneAttachFn) {
          var transcludeControllers;

          // no scope passed
          if (arguments.length < 2) {
            cloneAttachFn = scope;
            scope = undefined;
          }

          if (hasElementTranscludeDirective) {
            transcludeControllers = elementControllers;
          }

          return boundTranscludeFn(scope, cloneAttachFn, transcludeControllers);
        }

지시문은 범위없이이 함수를 호출하므로 범위가 정의되지 않습니다 ... 그런 다음 boundTranscludeFn 에서 transcludeScope가 거짓이면 새 범위를 만듭니다 ...

그래서 제가 말하고있는 것은 1에 대해, transclude 함수의 현재 범위를 간단히 지정할 수 있습니다 (이 지시문은 분리 범위를 가질 수있는 모든 것의 인접 지시문이므로 여전히 원래 범위를 제공해야합니다). .

또는 2), 새 범위를 만들지 말고 현재 범위 (createBoundTranscludeFn에서)로 기본 설정합니다 (잠재적으로 변경 사항을 중단하고 잠재적으로 많은 테스트를 중단 함).

둘 다 매우 간단합니다.

+1

+1

+1

확실히 +1

+1

+1

+1

+1 부탁합니다

당신은 꽤 멋진 것이 무엇인지 알고 있습니다. 비록 1.3 시간에 완전히 가능하지는 않지만 ES6 프록시 는 transclusion을 정말 멋지게 만들 수 있습니다.

프록시 구현을 사용할 수없는 경우에는 아마도 scope. $ new ()로 대체 할 수 있으므로 실제로이 작업을 상당히 일찍 수행 할 수 있습니다. 까다로운 것은 사양이 약간 흔들린다는 것입니다.

따라서 범위 계층 구조를 매우 깔끔하게 유지하려면 원치 않는 범위가 계속 발생하지만 최소한 데이터 바인딩이 예기치 않게 중단되지 않는 부작용이있을 수 있습니다. 몰라요.

+1

+1

+1

+1

+1

멍멍

또는 매우 멋지게 만들고 싶다면 ngTransclude가 속성 값을 통해 새 범위를 원할지 여부를 지정하도록 허용하여 변경 사항을 완전히 중단하지 않을 수 있습니다.

주요 변경 사항이없는 것은 무엇이든 내 투표를받습니다.

+1

+1

+1

+1

+1

관련 : https://github.com/angular/angular.js/issues/7874

+1. 나는 항상이 행동에 대해 궁금해했다. 나는 caitp 의이 솔루션을 좋아합니다.

멍멍

또는 매우 멋지게 만들고 싶다면> ngTransclude가 속성 값을 통해 새 범위를 원하는지 여부를 지정하도록 허용하여 변경 사항을 완전히 중단하지 않을 수 있습니다.

+1

+1

+1

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

• silbing - transclusion 이 발생하는 요소의 형제입니다. 이것이 현재의 ng-transclude 동작입니다.
• parent -transcluded content 범위는 transclusion이 발생하는 요소의 범위입니다.
• child -transcluded contents 범위는 transclusion이 발생하는 요소의 범위에 대한 자식 범위입니다.

사용 예 :

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

앞서 # 8609에서 제기 한 문제가이 스레드의 중복으로 종결되었으므로 여기서 다시 설명하겠습니다.

제 생각에 DOM의 외면 된 부분에 대해 범위가 생성되는 현재 방식은 매우 비논리적입니다!
각도의 정상적인 흐름에 어긋나므로 고정해야합니다!

다음은 이전 문제의 발췌 본입니다.

여기에 내 문제를 설명하기 위해 작은 덩어리 를 만들었습니다.

주요 범죄자는이 지침에 있습니다.

     function pane() {
        return {
           restrict: 'E',
           transclude: true,
           scope: {
              title: '@'
           },
           template: '<div style="border: 1px solid black;">' +
              '<div style="background-color: gray">{{title}} (isolate scope id: {{$id}})</div>' +
              '<ng-transclude></ng-transclude>' +
              '</div>'
        };
     }

사용자가 다음과 같이 할 때 :

<form>
    <pane title='enter your name'>
         <input type='text ngModel='username'>
    </pane>
    <pane title='enter your token'>
         <input type='text ngModel='token'>
   </pane>

그 결과는 특히 신규 사용자에게 놀라 울 것입니다. 그리고 이것은 (과도하게) 단순화 된 사용 사례입니다. 거기에 몇 가지 유효성 검사 메시지를 표시하십시오.)

이것은이 문제가 시작된 곳과 다른 사용 사례이지만 기본적으로 동일한 문제라는 데 동의합니다!

dom 요소로 범위를 대신하는 것이 더 합리적입니다. 새 범위가 정말로 필요한 경우 사용자는 ngTransclude 요소에 ngController 를 넣을 수 있습니다. 또는 ngTransclude 에 플래그를 트리거하는 선택적 플래그가있을 수 있습니다. 이 플래그는 # 5489 사용 사례를 해결하는데도 사용할 수 있습니다. 또한 제공되는 솔루션 caitp에도 사용할 수 있습니다.

+1

+1

+1

+1

+1

+1

+1

+1

+1

+1

+1

+1

+1은하지 말라고 요청을 받았을 때에도 범위를 생성하는 것으로 보입니다. 예 http://plnkr.co/edit/Wn81IBkE87vtigXvjmIa?p=preview

+1

+1

+1

+1

+1

+1

+1

+1

+1-이에 대한 유효한 해결 방법이 있습니까?

@nikkwong ,이 스레드에 게시 된 몇 가지 해결 방법이 있습니다. 해결 방법을 보여주는 플렁크 에서 링크를 수행했음을 알고 있습니다.

좋습니다. 이것이 도착하더라도 1.5.x까지는 아닙니다.

하지만 그 전에 걱정이 있습니다. 새 범위를 만드는 주된 이유 (격리 범위의 형제 또는 더 정확하게는 제외 된 콘텐츠가 나오는 원래 범위의 자식이라고 함)는 메모리 누수를 방지하기위한 것입니다.

이 플 런커를 비교하십시오.
http://plnkr.co/edit/3NVxdYGy1AFDvD0M2BYI?p=preview

원래 transclusion이 온 곳에서 범위를 재사용하는 버전으로 :
http://plnkr.co/edit/MXFz2awcqwQQ7R882Xwz?p=preview

두 번째 버전에서는 트랜스 클루 드 된 콘텐츠를 켜고 끌 때 감시자 수가 계속 증가합니다. 메모리 누수가 발생합니다.

@petebacondarwin 확실히 새로운 범위 여야하므로 감시자와 함께 파괴 될 수 있습니다. transclusion에 대한 대부분의 슬픔은 ng-transclude가 포함하는 범위의 형제 범위를 생성하여 프로토 타입 상속을 통해 변수에 액세스 할 수 없기 때문이라고 생각합니다. 아니면 내가 틀렸나 요?

우리는 문제가 앵귤러 2 웨이 바인딩이 작동하는 방식이라는 것을 다시금 깨달았습니다. 확실히 ng-transclude는 자식 범위를 생성하지만 ng-repeat는 자식 범위를 만드는 것과 같이 동일한 상황에서 자신을 찾을 수있는 수많은 경우가있을 것입니다. 각도 코드를 살펴본 결과 양방향 바인딩 문제는 객체 속성으로는 작동하지 않지만 객체 자체에서는 잘 작동한다는 것을 깨달았습니다.

문제 : http://plnkr.co/edit/Wn81IBkE87vtigXvjmIa?p=preview

솔루션 : http://plnkr.co/edit/KShClgQVwIjscXPzVRwR?p=preview

완벽하지는 않지만 이것을 아는 것은 많은 문제를 해결했으며 속성에 대해 양방향 바인딩을 수행하지 마십시오.

이 솔루션은 이미 mbykovskyy에 의해 제안되었습니다. 그가 문제를 제기했을 때 나는 그것을 알아내는 데 시간이 걸리기 때문에 예제를 제공하고 있습니다.

@petebacondarwin 보유 범위가 파괴 될 때까지 일시적인 누출 일뿐입니다. 여기에 (a plunk) [http://plnkr.co/edit/Q587WQnX0u0u7JjhtCxa?p=preview]는 transclude-holding-scope를 전환하면 모든 것이 정상적으로 해제된다는 것을 보여줍니다.
그래도주의가 필요한 부분입니다. 아마도이 가능한 누출에 대한 문서의 큰 Waring이 문제를 해결하기에 충분할 수 있습니까?

모든 JS 누출은 브라우저를 새로 고칠 때까지 일시적인 것입니다 ;-)
2015 년 9 월 8 일 16:41, "Sander Elias" [email protected] 은 다음과 같이 썼습니다.

@petebacondarwin https://github.com/petebacondarwin
보유 범위가 파괴 될 때까지 일시적인 누출. 여기 (a
plunk) [http://plnkr.co/edit/Q587WQnX0u0u7JjhtCxa?p=preview]
transclude-holding-scope를 전환하면 모든 것이
잘 출시되었습니다.
그래도주의가 필요한 부분입니다. 아마도 큰 Waring
이 가능한 누출에 대한 문서가 문제를 해결하기에 충분할까요?

—
이 이메일에 직접 답장하거나 GitHub에서 확인하세요.
https://github.com/angular/angular.js/issues/5489#issuecomment -138603298
.

@SanderElias Angular 애플리케이션 사용자는 하루의 시작부터 끝까지 바쁘다.
우리는 이미 낮 동안 메모리 사용량이 증가하고 있음을 알고 있으며 페이지에 무엇을 올릴 지 매우주의해야합니다. 더 많은 누출 가능성을 도입하는 것은 위험합니다.

@troch -transclusion은 실제로 transcluded 콘텐츠가 원래 발견 된 범위의 하위 범위를 만듭니다. 이것은 몇 가지 버전으로 돌아가서 (확실히 1.2에서) 현재 지시문 범위의 부모의 자식을 생성했습니다. 이것은 깊이 중첩 된 transclusion이 실제로 잘못된 transclusion 범위를 가지고 있음을 의미합니다.

@petebacondarwin 에 동의해야하며 현재 동작이 100 % 직관적이지 않은 경우에도 현재 동작이 누출을 방지하기 위해 가장 잘 작동합니다. 이 문제를 Wont Fix로 종료하고 싶습니다.

몇 년 전에 Ember로 전환 한 것은 다행입니다. :)