AngularJS 지시문에서 자식 요소 찾기

Question

지시문에서 작업 중이며 element 매개 변수를 사용하여 클래스 이름별로 하위 항목을 찾는 데 문제가 있습니다.

.directive("ngScrollList", function(){ 
    return { 
     restrict: 'AE', 
     link: function($scope, element, attrs, controller) { 

      var scrollable = element.find('div.list-scrollable'); 

      ... 
     } 
     }; 
}) 

내가 태그 이름을 찾을 수 있지만 내가 콘솔에서 볼 수있는 클래스 이름을 찾는데 실패 : 같은 일을의 올바른 방법이 될 것입니다

element.find('div') 
[<div class=​"list-viewport">​…​</div>​,<div class=​"list-scrollable">​…​</div>​] 
element.find('div.list-scrollable') 
[] 

를? 당신의 연결 기능, 돈에, 또한

// link function 
function (scope, element, attrs) { 
    var myEl = angular.element(element[0].querySelector('.list-scrollable')); 
} 

이렇게, 내가 jQuery를 추가 할 수 있습니다 알고 있지만, 그 잔인한 .... 당신의 링크 기능에서

Answer 1

jQlite (angular의 "jQuery"포트)는 클래스 별 조회를 지원하지 않습니다.

한 가지 해결책은 앱에 jQuery를 포함시키는 것입니다.

또 다른

는 QuerySelector 또는 QuerySelectorAll을 사용하고 있습니다 :

link: function(scope, element, attrs) { 
    console.log(element[0].querySelector('.list-scrollable')) 
} 

우리는 HTML 요소입니다 element 배열의 첫 번째 항목을 사용합니다. element.eq(0)은 동일한 것을 산출 할 것이다. 이 [도움] 경우

FIDDLE

Answer 2

되지 않을 것 궁금 해서요 $을 사용하여 변수 scope의 이름을 지정하지 마십시오. 이것은 앵귤러 서비스에 특화된 각도 컨벤션이며, 여러분 자신의 변수에 사용하기를 원하는 것이 아닙니다.