AngularJs 전체 Jquery 선택이 작동하지 않습니다.

Question

Jquery 플러그인을 사용하여 AngularJS 지시문에서 DOM을 조작하려고합니다.

AngularJs가 전체 버전의 Jquery를 사용하고 있는지 여부는 잘 모르겠지만 AngularJs 스크립트가 본문에있는 동안 정식 버전 스크립트가 머리에 있지만 이론적으로 AngularJS는 정식 버전을 사용해야합니다. 그러나 지시문 내부의 로그 항목에 아무것도 표시되지 않습니다. Chrome 콘솔 내의 동일한 구문은 ul 내부의 모든 lis를 반환합니다. 난 그냥

console.log($(".gallery")); 

그들 내에서 리튬과 UL을 반환 않는 것을 깨달았다하지만

console.log($(".gallery li")); 

:

다음은 HTML을

<ul id="myUl" class="gallery unstyled"> 
    <li class="galleryitem" ng-repeat="i in images"> 
     <a href="{{i.LargeImage.URL}}"><img ng-src="{{i.MediumImage.URL}}" /></a> 
    </li> 
</ul> 

지침

.directive('gallery',function() { 
    return { 
     restrict : 'C', 
     link : function postLink(scope, iElement, iAttrs) { 
     console.log($(".gallery li")); 
     } 
    } 
    } 

PS에게있어

정식 버전이로드되지 않았다고 생각됩니다.

Answer 1

jQuery가로드되었지만 연결 함수에서 $('.gallery')을 호출하면 ng-repeater 표현식이 아직 평가되지 않았으므로 그 순간에 모든 li 요소가 DOM에 없습니다. 그냥 실험, 당신은 ng-repeater 평가 한 후 DOM을 조회하고 있기 때문에 당신은 모든 li 요소를 얻을 것이다,

setTimeout(function(){ 
    console.log($(".gallery li")); 
}, 1000); 

그런 다음 선택을 호출하기 전에 지연을 추가 할 수 있습니다. 콘솔에서 li 노드를 선택하면 실행됩니다.

계속하기 전에 라이브러리가로드 될 때 각도가 jQuery를 사용한다고하면 angular.element이 선택기를 구현하고 지시문 내부의 요소에 대한 참조는 jQuery 메서드를 사용할 수 있음을 의미합니다. 권장 사항은

iElement.find('li') // instead of $('.gallery li') 

이제 지침의 요소의 맥락에서 DOM을 조작하는 것입니다, 당신이 궁금 할 것이다, 그럼 어떻게 내가 DOM을 수정하는 방법은 무엇입니까? 정확히 무엇을 성취하려고하는지에 달려 있습니다. 당신은 모든 li가 ngRepeater에서 렌더링 된 후 DOM을 조작하는 원하기 때문에 당신은 $last은 여기 true

경우 중계기의 마지막 항목을 선택하여 렌더링 될 때 확인하는 특별한 지시 checkLast을 사용할 수 있습니다 이 google groups discussion에있는 누군가의 jsfiddle

또는 일부 범위 속성을 변경하려면 $watch 수 있습니다.

Answer 2

나 같은 몇 가지 대답을 찾아 그들을 위해,이 방법으로이 일

.directive('gallery',function() { 
     return { 
      restrict : 'C', 
      link : function postLink(scope, iElement, iAttrs) { 
       iElement.ready(function(){ 
        console.log($(".gallery li")); 
       });   
      } 
     } 
    } 

을 시도, 당신은 당신의 인 IElement가 DOM 조작 건은 $입니다