스핀(비지) 컨트롤이 있는 angular.element vs document.getElementById 또는 jQuery 셀렉터

스핀(비지) 컨트롤이 있는 angular.element vs document.getElementById 또는 jQuery 셀렉터

Spin 컨트롤의 Angularized 버전을 사용하고 있습니다.여기서 설명하겠습니다.http://blog.xvitcoder.com/adding-a-weel-progress-indicator-to-your-angularjs-application/

표시된 솔루션의 마음에 들지 않는 점 중 하나는 스핀 컨트롤을 DOM 요소에 효과적으로 부가하는 서비스에 jQuery를 사용하는 것입니다.각 구조를 사용하여 요소에 액세스하고 싶습니다.또, 스피너가 서비스내에서 접속할 필요가 있는 요소의 ID를 「하드 코드화」하지 않고, 대신에 서비스내의 ID(싱글톤)를 설정하는 디렉티브를 사용해, 서비스의 다른 유저나 서비스 자신이 알 필요가 없게 하고 싶다고 생각하고 있습니다.

동일한 요소 ID의 angular.elementById와 document.getElementById를 구분하는 데 어려움을 겪고 있습니다.이 방법은 다음과 같습니다.

  var target = document.getElementById('appBusyIndicator');

다음 중 어느 것도 해당되지 않습니다.

  var target = angular.element('#appBusyIndicator');
  var target = angular.element('appBusyIndicator');

난 분명히 잘못되었어야 할 일을 하고 있어!누구 도와줄 사람 있어?

의 작업을할 수 할 때 할도 같은 를 들어, jQuery는 jQuery를 치환하려고 합니다.$(target).fadeIn('fast');angular.element('#appBusyIndicator').fadeIn('fast') ★★★★★★★★★★★★★★★★★」angular.element('appBusyIndicator').fadeIn('fast') 않아.

각진 "Element" DOM은 DOM을 사용합니까?Angular는 분명히 자신의 특성이나 메서드 등과 함께 요소를 "잘못"하지만 원래 값을 얻기 어려운 경우가 많습니다.를 들어, 제가 ㅇㅇㅇㅇㅇㅇ가 , 저는 먼저 새로운 것이 있습니다.<input type='number'>필드 및 사용자가 "--"라고 입력했을 때 UI에 표시되는 원래 콘텐츠에 액세스하고 싶다(따옴표 없이) 아무것도 표시되지 않는다.아마도 "type=number"는 각도가 UI에 표시되는데도 입력을 거부한다는 의미이기 때문에 테스트하고 클리어하고 싶다.

조언/답변 감사합니다.

감사해요.

다음과 같이 동작합니다.

var myElement = angular.element( document.querySelector( '#some-id' ) );

네이티브 Javascript 콜을 에 랩합니다.angular.element()따라서 항상 요소를 jqLite 또는 jQuery 객체에 넣습니다.jQuery사용가능/로드되어 있습니다.

★★★★★의 angular.element:

jQuery를 사용할 수 있는 경우angular.element입니다.jQuery수 없는 jQuery를 사용합니다.angular.element딜러에게 내장된 Angulars 서브셋을 제공합니다.jQuery'jQuery Lite' 또는 'jqLite'라고 불리는 것입니다.

의 모든 요소 Angular항상 jQuery로 둘러싸여 있습니다.jqLite(명령어 컴파일 또는 링크 함수의 요소 인수 등). 날것이 아니다.DOM★★★★★★ 。

왜 사용해야 하는지 궁금할 경우document.querySelector(), 이 답변을 읽어주세요.

아직 각 요소 문서를 읽지 않은 경우 jqLite에서 지원되는 항목과 -jqlite가 아닌 항목을 이해할 수 있도록 각도에 내장된 jquery의 서브셋입니다.

ID에 의한 실렉터는 지원되지 않기 때문에 이러한 실렉터는 jqLite에서만 동작하지 않습니다.

  var target = angular.element('#appBusyIndicator');
  var target = angular.element('appBusyIndicator');

그래서 다음 중 하나를 선택합니다.

• jqLite만 사용하고 jquery보다 제한적이지만 대부분의 상황에서는 충분합니다.
• 또는 앱에 완전한 jQuery lib를 포함하여 jquery가 필요한 장소에서 일반 jquery처럼 사용할 수도 있습니다.

편집: jQuery는 angular보다 먼저 로드해야 합니다.JS는 jqLite보다 우선합니다.

실제 jQuery는 항상 jqLite보다 우선합니다.단, DOMContentLoaded 이벤트가 발생하기 전에 로드된 경우입니다.

편집 2: 질문의 두 번째 부분을 놓쳤습니다.

「 」에 <input type="number">각도가 있는 문제가 아니라 네이티브 html5 번호 요소의 의도된 동작이라고 생각합니다.

jquery's jquery로 가 아닌 .val() raw ★★★★★★★★★★★★★★★★★★.value여하하다

var target = document.getElementById('appBusyIndicator');

와 동등하다

var target = $document[0].getElementById('appBusyIndicator');

만약 누군가가 꿀꺽을 사용한다면, 만약 우리가 그것을 사용한다면, 그것은 오류를 나타낸다.document.getElementById() '어디서나 쓸 수 있다' 이런 을 쓰도록 하겠습니다.$document.getElementById()효과가 없어요.

사용 -

$document[0].getElementById('id')

앵귤러 사용법은 아닌 것 같아요.프레임워크 메서드가 존재하지 않으면 생성하지 마십시오!즉, 프레임워크(여기서 각도)는 이러한 방식으로 작동하지 않습니다.

각도에서는 DOM을 이렇게 조작하지 말고(쿼리 방식), 다음과 같은 각도 도우미를 사용해야 합니다.

<div ng-show="isLoading" class="loader"></div>

또는 디렉티브(자신의 DOM 컴포넌트)를 작성하면 디렉티브를 완전하게 제어할 수 있습니다.

참고로 http://caniuse.com/ #search= selector query Selector는 잘 지원되므로 안전하게 사용할 수 있습니다.

$document($document 삽입 필요)를 사용하여 요소에 액세스할 수 있습니다.

var target = $document('#appBusyIndicator');
var target = $document('appBusyIndicator');

또는 각도 요소를 사용하여 다음과 같이 지정된 요소에 액세스할 수 있습니다.

var targets = angular.element(document).find('div'); //array of all div
var targets = angular.element(document).find('p');
var target = angular.element(document).find('#appBusyIndicator');

컨트롤러에 $document를 삽입하고 원본 문서 개체 대신 사용해야 합니다.

var myElement = angular.element($document[0].querySelector('#MyID'))

jquery style 요소 랩이 필요하지 않은 경우 $document[0]를 선택합니다.query Selector('#MyID')는 DOM 개체를 제공합니다.

이게 나한테 잘 먹혔어.

angular.forEach(element.find('div'), function(node)
{
  if(node.id == 'someid'){
    //do something
  }
  if(node.className == 'someclass'){
    //do something
  }
});

카이저의 답변 개선:

var myEl = $document.find('#some-id');

주사 놓는 거 잊지 마$document당신의 지시로

내가 너무 늦었을지도 모르지만, 이것은 효과가 있을 것이다.

var target = angular.element(appBusyIndicator);

주의: 없습니다.appBusyIndicator플레인 ID 값입니다.

(div에 적용된다고 가정하면) (angular.js 행 번호: 2769 이후...)

/////////////////////////////////////////////
function JQLite(element) {     //element = div#appBusyIndicator
  if (element instanceof JQLite) {
    return element;
  }

  var argIsString;

  if (isString(element)) {
    element = trim(element);
    argIsString = true;
  }
  if (!(this instanceof JQLite)) {
    if (argIsString && element.charAt(0) != '<') {
      throw jqLiteMinErr('nosel', 'Looking up elements via selectors is not supported by jqLite! See: http://docs.angularjs.org/api/angular.element');
    }
    return new JQLite(element);
  }

기본적으로 페이지에 jQuery가 없는 경우 jqLite가 사용됩니다.인수는 내부적으로 ID로 인식되며 대응하는 jQuery 개체가 반환됩니다.

언급URL : https://stackoverflow.com/questions/17230242/angular-element-vs-document-getelementbyid-or-jquery-selector-with-spin-busy-c