사용자 지정 지정어의 중첩 된 내용을 수정하는 방법은 무엇입니까?

Question

Im angular 1.x을 사용하고 다음 코드와 같이 slider라는 사용자 지정 지시문을 만들었습니다.

나는 transclude 함수 내에서 수정하기 위해 slider 지시어의 내용을 transclude에 넣으려고합니다. 그러나 문제는 클론이 .slide 요소 모음을 제공하지 않는다는 것입니다. 대신 ng-repeat과 관련된 설명을 제공합니다. 나는 어떤 .slide 된 div를 잡을 나던 컴파일 내가 원하는 .slide divs.의 모음 I이 성공적으로되는 일이 이제 어떻게 scope.showCurrent.를 호출 할 수 있도록 transclude 함수 내에서 ng-repeat의 결과에 액세스하는 방법을 알고 있어야한다 ng-repeat의 출력, scope.showCurrent() 내부 $('.slide') 전화를받을 수 없습니다 전화 할 때 .slide 요소가 없기 때문입니다. 그러나 ng-repeat이 transclude 함수 내에서 컴파일 된 html을 제공하면 $('.slide')은 div를 catch합니다.

app.directive('slider', function ($compile) { 
    return { 
      restrict: 'EA', 
      priority: 1200, 
      scope: true, 
      controller: function ($scope) { 
       $scope.slider = { currentIndex: 0 }; 
      }, 
      transclude:'element', 
      link: function (scope, el, attrs, ctrl, transclude) { 

       scope.showCurrent = function (currentIndex) { 
        console.log('x') 
        $('.slide').hide(); 
        $('.slide').eq(currentIndex).show(); 
       } 

       scope.$watch('slider.currentIndex', function (val) { 
        console.log('tst'); 
        scope.showCurrent(val); 
       }); 

       transclude(scope, function (clone) { 
        el.after(clone); 
        scope.showCurrent(scope.slider.currentIndex); 
       }) 
      }, 
    } 
}); 

다음은이 지시문의 html 사용법입니다.

<slider> 
    <div ng-repeat="slide in slides" class="slide"> 
    <div>Image {{img}}</div> 
    <img ng-src="img"/> 
    </div> 
</slider> 

가 여기에 있기 때문에 transclude 내부의 코드가 실행되고있는 시점에서 당신은 .slide divs을하지 않는 나의 쿵하는 소리 https://plnkr.co/edit/m7YJBNuDjeLPaKkUYK5S?p=preview

Answer 1

입니다 :

el.after(clone); 
scope.showCurrent(scope.slider.currentIndex); 

내부 컨텐츠의 연결 기능, 특히 ng-repeat의 연결 기능이 아직 실행되지 않았습니다. 이 연결 기능 안에는 감시자가 slides에 추가되었습니다.

, 연결 기능이 여기에 같이 실행될 때까지 기다릴 경우에도 : 첫 번째 루프가 실행을 소화 할 때까지

transclude(scope, function (clone) { 
    el.after(clone); 
    scope.showCurrent(scope.slider.currentIndex); 
}) 
// here the linking functions of the `clone` have already been executed 

.slide divs은 여전히 ​​사용할 수 없습니다. 이 다를 수 clone 하나의 컴파일 처리됩니다 ng-transclude 및 ng-transclude에 의해 처리한다는 것 때문에 갱신

후

당신은 확실히 여기

transclude(scope, function (clone) { 
    el.after(clone); 
    scope.showCurrent(scope.slider.currentIndex); 
}) 

이 부분이 필요하지 않습니다 콘텐츠를 연결합니다. 다이제스트 루프가 실행되고 ng-repeat이 div .slider 요소를 렌더링 할 때까지 기다려야합니다. 이를 위해 $timeout :

$timeout(function() { 
    scope.showCurrent(scope.slider.currentIndex); 
});