angular.element와 document.getElementById 또는 스핀 (바쁜) 컨트롤이있는 jQuery 선택기

http://blog.xvitcoder.com/adding-a-weel-progress-indicator-to-your-angularjs-application/에 설명 된대로 스핀 컨트롤의 "Angularized"버전을 사용하고 있습니다.

표시된 솔루션에 대해 싫어하는 것 중 하나는 스핀 컨트롤을 DOM 요소에 효과적으로 연결하는 서비스에서 jQuery를 사용하는 것입니다. 각도 구성을 사용하여 요소에 액세스하는 것을 선호합니다. 또한 스피너가 서비스 내에서 연결 해야하는 요소의 ID를 "하드 코딩"하는 것을 피하고 대신 서비스의 단일 사용자를 설정하는 지시문을 사용하여 다른 서비스 사용자 또는 서비스 자체는 알 필요가 없습니다.

angular.element가 제공하는 것과 vs. 동일한 요소 ID의 document.getElementById가 제공하는 것과 어려움을 겪고 있습니다. 예. 이것은 작동합니다 :

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

이 중 어느 것도 수행하지 않습니다.

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

나는 분명히 명백하게 잘못해야 할 일을 분명히하고 있습니다! 아무도 도와 줄 수 있습니까?

위의 작업을 수행 할 수 있다고 가정하면 요소에 대한 jQuery 액세스를 대체하는 것과 비슷한 문제가 있습니다. 예 : $(target).fadeIn('fast'); 작동 angular.element('#appBusyIndicator').fadeIn('fast')하거나 작동 angular.element('appBusyIndicator').fadeIn('fast')하지 않습니다

누군가가 Angular "element"대 DOM 요소의 사용을 분명히하는 훌륭한 문서 예를 알려 줄 수 있습니까? Angular는 분명히 자체 속성, 메소드 등으로 요소를 "포장"하지만 원래 값을 얻는 것은 종종 어렵습니다. 예를 들어 <input type='number'>필드가 있고 사용자가 "-"(따옴표없이)를 입력 할 때 UI에 표시되는 원본 내용에 액세스하려는 경우 "type = number"는 Angular가 거부한다는 의미이므로 아무 것도 얻지 못합니다. 입력이 UI에 표시되어 있지만 입력하고 테스트하고 지울 수 있도록보고 싶습니다.

모든 답변 / 감사합니다.

감사.

그것은 다음 과 같이 작동 할 수 있습니다 :

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

Document.querySelector()기본 Javascript 호출을 호출로 랩핑합니다 angular.element(). 따라서 사용 가능 /로드 여부에 따라 항상 jqLite 또는 jQuery 객체 의 요소를 가져옵니다 jQuery.

에 대한 공식 문서 angular.element:

jQuery 가 사용 가능한 경우 함수 angular.element의 별명입니다 jQuery. jQuery를 사용할 수없는 경우 "jQuery lite"또는 jqLite 라는 Angular 의 내장 하위 집합에 angular.element위임합니다 .jQuery

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

왜 사용해야하는지 궁금하다면 이 답변을document.querySelector() 읽으십시오 .

아직 각도 요소 문서를 읽지 않았다면 jqLite가 지원하는 것과 jqlite가 각도에 내장 된 jquery의 서브셋이 아닌 것을 이해할 수 있습니다.

그 선택기가 작동하지 않습니다 때문에, 혼자 jqLite와 선택기 ID로는 지원되지 않습니다.

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

따라서 :

• jquery보다 jqLite를 단독으로 사용하지만 대부분의 상황에서 충분합니다.
• 또는 jQuery 라이브러리 전체를 앱에 포함시키고 jquery가 필요한 곳에서 일반 jquery와 같이 사용하십시오.

편집 : jqLite보다 우선하려면 jQuery가 angularJS보다 먼저 로드되어야합니다 .

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

편집 2 : 나는 전에 질문의 두 번째 부분을 놓쳤다.

와 문제는 <input type="number">, 내가 생각하는 그것, 그것은의 의도 된 행동 각도 문제가되지 않는 네이티브 HTML5 번호 요소입니다.

jquery .val()또는 raw .value속성 으로 검색하려고해도 숫자가 아닌 값을 반환하지 않습니다 .

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

동일하다

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

각도를 사용하는 것이 올바른 방법이라고 생각하지 않습니다. 프레임 워크 메소드가 존재하지 않으면 작성하지 마십시오! 이것은 프레임 워크 (여기에서 각도)가 이런 식으로 작동하지 않음을 의미합니다.

앵귤러를 사용하면 이와 같은 DOM (jquery 방법)을 조작해서는 안되지만 다음과 같은 각도 도우미를 사용해야합니다.

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

또는 자신의 지시어 (자신의 DOM 구성 요소)를 작성하여 명령을 완전히 제어 할 수 있습니다.

BTW, http://caniuse.com/#search=queryselector querySelector는 잘 지원되므로 안전하게 사용할 수 있습니다.

누군가가 꿀꺽 꿀꺽 마시면 사용하면 오류가 표시 document.getElementById()되고 사용을 제안 $document.getElementById()하지만 작동하지 않습니다.

사용하다 -

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

$ 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 스타일 요소 랩이 필요하지 않으면 $ document [0] .querySelector ( '# 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 line no : 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 오브젝트가 리턴됩니다.