ng-app와 data-ng-app의 차이점은 무엇입니까?

230

현재이 시작 튜토리얼 비디오 를보고 있습니다.angular.js

어떤 순간 ( '12'40 후), 스피커 상태 속성 바로 그 순간 ng-app과 data-ng-app=""다소 동등한 내부에 <html>태그 등이다 ng-model="my_data_binding하고 data-ng-model="my_data_binding". 그러나 스피커는 속성 인에 따라 HTML을, 다른 검증을 통해 검증 할 것이라고 말했습니다 익숙한.

ng-접두사와 data-ng-접두사 두 가지 방법의 차이점을 설명해 주 시겠습니까?

html angularjs

— 스테판 롤랜드
소스

2

ng-app와 data-ng-app의 차이점

— 밥 자비스-복원 모니카

403

좋은 질문. 둘 사이에는 차이가 전혀 없다 -의 차이는 간단하다 를 제외하고 같은 속성에 오류가 발생 것이라고 확신 HTML5 유효성 검사기가 ng-app있지만 접두사 아무것도 오류가 발생하지 않습니다 data-같은 data-ng-app.

질문에 대답하려면 data-ng-appHTML을 좀 더 쉽게 검증하고 싶을 때 사용 하십시오.

재미있는 사실 : x-ng-app같은 효과 에도 사용할 수 있습니다 .

— 코드 위스퍼러
소스

4

데이터 접두사가 ng 속성이 제대로 작동하지 못하게합니까? (예 : "data-ng-repeat")?

— tonejac

3

그것은 수동으로 없애기 CPU 사이클 등의 낭비처럼 보인다 data-및 x-. HTML 유효성 검사 규칙을 변경하여 변경할 수없는 이유는 무엇 ng-입니까?

— DaveAlger

8

@DaveAlger : data-*속성은 HTML을 확장하는 방법 입니다.

— sampathsris

1

@DaveAlger : 말한대로하는 것이 좋지 않습니다. 다른 접두사가있는 Angular와 같은 유명한 도구가 많이 있다면 HTML을 따라 접두사를 추가하고 싶습니까?!?! Krumia가 말했듯이 HTML을 확장하는 방법입니다.

— Dassi Orleando

65

에서 AngularJS와 문서

Angular는 요소의 태그와 속성 이름을 정규화하여 어떤 요소가 어떤 지시문과 일치하는지 확인합니다. 일반적으로 대소 문자를 구분하는 camelCase 정규화 된 이름 (예 : ngModel)으로 지시문을 참조합니다. 그러나 HTML은 대소 문자를 구분하지 않으므로 일반적으로 DOM 요소 (예 : ng-model)에서 대시로 구분 된 속성을 사용하여 소문자 형식으로 DOM의 지시문을 참조합니다.

정규화 프로세스는 다음과 같습니다.

요소 / 속성 앞에서 x 및 데이터를 제거합니다. :,-또는 _로 구분 된 이름을 camelCase로 변환하십시오. 다음은 ngBind와 일치하는 요소에 해당하는 몇 가지 예입니다.

위의 진술에 근거한 모든 유효한 지시어

1. ng- 바인드
2. ng : 바인드
3. ng_bind
4. 데이터 -ng- 바인드
5. x- ng- 바인드

— 시린
소스

그러나 지시문 이름과 비교하기 위해서만 이것을 수행합니다. 실제 속성은 변경되지 않습니다.

— RetroCoder

3

-,: 및 _ 표기법에 대해 알아두면 좋습니다.

— Code Whisperer

29

차이점은 사용자 정의 data-*속성이 HTML5 사양 에서 유효 하다는 사실에 있습니다 . 따라서 마크 업을 확인해야하는 경우 ng속성 대신 마크 업을 사용해야합니다 .

— 마누 레 트롤
소스

1

사양에서 data- *는 html의 유효성을 검사하기 때문에 작동한다는 것을 이해합니다. 그런데 왜 x- *가 작동합니까? 사양에서 이것에 대한 설명이 아닙니다.

— Bhramar

1

x- *는 브라우저에서 사용하도록 예약되어 있습니다. WHY x에 대한 귀하의 질문에 관해서는, 각도로 작동 할 것입니다. 특히 데이터 / x를 프레임 워크로 코딩하여 데이터 / x에 대해 작동하는지 확인하십시오. 왜 x가 각을 위해 일하는지 묻는다면 또 다른 논쟁입니다. 어느 쪽이든 좋은 주장이 있습니다. SO에 대한이 답변을 참조하십시오 : stackoverflow.com/a/17902387/339803 해당 페이지의 다른 답변은 x가 XHTML에 대한 것이라고 생각하지만 확실하지 않습니다. 모든 것을 읽은 후에 무엇을 만들 수 있는지보십시오. HTML5 스펙은 또한 브라우저 / 벤더 사용을 말합니다 : w3.org/html/wg/drafts/html/master/single-page.html

— redfox05

15

짧은 답변:

ng-model와 data-ng-model같은과 동일합니다!

왜?

이유 : data- 접두사
HTML5 사양은 모든 맞춤 속성 앞에 접두사가 붙을 것으로 예상합니다 data-.
: 이유 모두 ng-model와 data-ng-model동일과 동일합니다.

AngularJS 문서-정규화

Angular는 요소의 태그와 속성 이름을 정규화하여 어떤 지시문과 일치하는 요소를 결정합니다. 일반적으로 대소 문자를 구분하는 camelCase 정규화 된 이름 (예 :) 으로 지시문을 참조합니다 ngModel. 그러나 HTML은 대소 문자를 구분하지 않으므로 DOM의 지시문은 소문자 형식으로, 일반적으로 DOM 요소에서 대시로 구분 된 속성 (예 :)을 사용합니다 ng-model.

정규화 프로세스는 다음과 같습니다.
1. 다음 형식을 모두 제거하고 ngBind 지시문과 일치시킵니다.x- 및 data-소자의 정면 / 속성.
변환 (2) :, -또는 _에 -delimited 이름을 camelCase.

예를 들어

<div ng-controller="Controller">
  Hello <input ng-model='name'> <hr/>
  <span ng-bind="name"></span> <br/>
  <span ng:bind="name"></span> <br/>
  <span ng_bind="name"></span> <br/>
  <span data-ng-bind="name"></span> <br/>
  <span x-ng-bind="name"></span> <br/>
</div>

— 소용돌이
소스

2

페이지 HTML을 유효하게하려면 ng- 대신 data-ng-를 사용할 수 있습니다.

— NNaseet
소스

2

OP는 상호 교환 가능하게 사용할 수 있음을 이해하지만 "동일한"작업으로 두 가지를 사용할 수있는 이유를 알고 자합니다. 나는 그것들을 다르게 만드는 것에 대한 설명이 더 가치있는 대답이라고 믿습니다.

— 찰스 왓슨

1

브라우저에서 html 또는 html-fragments를 브라우저에 제공하기 전에 조작하려면 ng-xxx 속성 대신 data-ng-xxx 속성을 사용하는 것이 가장 좋습니다.

그것은 html을 유효하게 만듭니다. 이는 domdocument (php)와 같은 html (서버 기반) 파서가 사용할 수 있음을 의미합니다. 이러한 파서는 종종 잘 구성되지 않은 html에서 실패합니다.
Angular는 속성을 정규화하지만 서버가 아닌 클라이언트에 있다는 것을 기억하십시오.

— 케스 헤 셀스
소스