Program Club

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

proclub 2020. 12. 3. 20:47
반응형

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


지시문에서 작업 중이며 매개 변수 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')
[]

그런 일을하는 올바른 방법은 무엇입니까? jQuery를 추가 할 수 있다는 것을 알고 있지만 과잉이 아닐지 궁금합니다 ....


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

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

다른 하나는 QuerySelector또는 사용 중입니다 QuerySelectorAll.

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

element배열 의 첫 번째 항목 인 HTML 요소를 사용합니다. element.eq(0)같은 결과를 얻을 것입니다.

깡깡이


링크 기능에서 다음을 수행하십시오.

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

또한, 귀하의 링크 기능에, 당신의 이름을하지 않는 scope사용 a 변수를 $. 이것은 내장 된 각도 서비스에 특정한 각도 규칙이며 사용자 고유의 변수에 사용하려는 것이 아닙니다.

참고 URL : https://stackoverflow.com/questions/24620128/find-child-element-in-angularjs-directive

반응형