AngularJS DOM 선택기

AngularJS DOM 선택기

애니메이션 효과에 jQuery를 사용하는 커스텀 디렉티브가 몇 개 있습니다(angular의 빌트인 ngShow/ngHide 등은 기능적이지만 예쁘지는 않습니다).설명서에서 앵귤러에 자체 DOM 셀렉터가 있는 곳을 읽은 기억이 있습니다.angular.export()또는angular.select()대신 사용하는 것이 좋습니다.$(SELECTOR)그러나 지금은 찾을 수 없습니다.

저는 이렇게 하고 있습니다.

//view
<div scroll-to="element"> //`element` is set via ng-click
  …
</div>

//directive
link: function(scope, elm, attrs)
{

  scope.$watch(attrs.scrollTo, function scrollToAction(newValue,oldValue)
  {
    if ( newValue !== oldValue )
    {
      elm.animate({
        scrollTop:
          $('#'+newValue).offset().top //replace jquery selector with angular's
          - elm.offset().top
          + elm.scrollTop()
      });
    }
  });

}

난 정말 조종하는 게 아니야$('#'+newValue)정보를 얻어서 앵글에게 범죄를 저지르는 건 아닌 것 같아요

AngularJs 공식 문서에서 말하듯이

Angular의 모든 요소 참조는 항상 jQuery 또는 jqLite로 래핑됩니다(예: 디렉티브의 컴파일/링크 함수의 요소 인수).이들은 결코 원시 DOM 참조가 아닙니다.

상세: Angular 참조 전에 jQuery를 포함하면angular.element()함수는 jQuery의 별칭이 됩니다(그렇지 않은 경우).jqLiteMark Rajcok의 답변을 참조하십시오).

---

호출하는 회선에 중단점을 배치하여 jQuery 또는 jqLite를 가져올 경우 Dev Tool 디버거에서 확인할 수 있습니다.angular.element()마우스를 돌리면 관련 라이브러리의 입력을 요구할 수 있습니다.아래 스크린샷을 참조해 주세요(제 경우는 jQuery가 표시됩니다).

---

AngularJs 공식 문서에서 말하듯이

태그 이름으로 조회하는 경우 대신 시도합니다.angular.element(document).find(...)또는$document.find()

즉, 호출 시 jQuery가 표시되는 경우angular.element(), 그 다음에,angular.element('#foo > bar')만약 당신이 그렇게 생각한다면 효과가 있어요.

---

jQuery를 사용하지 않고 이 셀렉터 기능을 얻는 방법을 알고 싶다면 Sizzlejs를 사용하는 것이 좋습니다.sizzle은 jQuery가 후드 아래에서 사용하는 셀렉터 라이브러리입니다.

"jqLite" (angular.element 페이지에서 정의됨)는 다음과 같은 DOM 통과 방법을 제공합니다.children(),parent(),contents(),find(),next()(단, 아닙니다)previous()). 셀렉터 같은 메서드는 없습니다.

JavaScript의 querySelector를 사용해 보십시오.

언급URL : https://stackoverflow.com/questions/15280463/angularjs-dom-selector