ng-app와 data-ng-app의 차이점은 무엇입니까?
현재이 시작 튜토리얼 비디오 를보고 있습니다.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-접두사 두 가지 방법의 차이점을 설명해 주 시겠습니까?
좋은 질문. 둘 사이에는 차이가 전혀 없다 -의 차이는 간단하다 를 제외하고 같은 속성에 오류가 발생 것이라고 확신 HTML5 유효성 검사기가 ng-app있지만 접두사 아무것도 오류가 발생하지 않습니다 data-같은 data-ng-app.
질문에 대답하려면 data-ng-appHTML을 좀 더 쉽게 검증하고 싶을 때 사용 하십시오.
재미있는 사실 : x-ng-app같은 효과 에도 사용할 수 있습니다 .
Angular는 요소의 태그와 속성 이름을 정규화하여 어떤 요소가 어떤 지시문과 일치하는지 확인합니다. 일반적으로 대소 문자를 구분하는 camelCase 정규화 된 이름 (예 : ngModel)으로 지시문을 참조합니다. 그러나 HTML은 대소 문자를 구분하지 않으므로 일반적으로 DOM 요소 (예 : ng-model)에서 대시로 구분 된 속성을 사용하여 소문자 형식으로 DOM의 지시문을 참조합니다.
정규화 프로세스는 다음과 같습니다.
요소 / 속성 앞에서 x 및 데이터를 제거합니다. :,-또는 _로 구분 된 이름을 camelCase로 변환하십시오. 다음은 ngBind와 일치하는 요소에 해당하는 몇 가지 예입니다.
위의 진술에 근거한 모든 유효한 지시어입니다
1. ng- 바인드
2. ng : 바인드
3. ng_bind
4. 데이터 -ng- 바인드
5. x- ng- 바인드
차이점은 사용자 정의 data-*속성이 HTML5 사양 에서 유효 하다는 사실에 있습니다 . 따라서 마크 업을 검증해야하는 경우 ng속성 대신 마크 업을 사용해야합니다 .
짧은 대답:
ng-model와 data-ng-model같은과 동일합니다!
왜?
이유 :
data-접두사
HTML5 사양에서는 모든 맞춤 속성 앞에 접두사가 있어야합니다data-.: 이유 모두
ng-model와data-ng-model동일과 동일합니다.
AngularJS 문서-정규화
Angular는 요소의 태그와 속성 이름을 정규화하여 어떤 지시문과 일치하는 요소를 결정합니다. 일반적으로 대소 문자를 구분하는 camelCase 정규화 된 이름 (예 :) 으로 지시문을 참조합니다ngModel. 그러나 HTML은 대소 문자를 구분하지 않으므로 DOM의 지시문은 소문자 형식으로, 일반적으로 DOM 요소에서 대시로 구분 된 속성 (예 :)을 사용합니다ng-model.
다음과 같이 정규화 과정은
1 스트립x-및data-소자의 정면 / 속성.
변환 (2):,-또는_에 -delimited 이름을camelCase.
예를 들어
다음 형식은 모두 동일하며 ngBind 지시문과 일치합니다.
<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>
페이지 HTML을 유효하게 만들려면 ng- 대신 data-ng-를 사용할 수 있습니다.
브라우저에서 html 또는 html-fragments를 브라우저에 제공하기 전에 조작하려면 ng-xxx 속성 대신 data-ng-xxx 속성을 사용하는 것이 가장 좋습니다.
- 그것은 html을 유효하게 만듭니다. 이는 domdocument (php)와 같은 html (서버 기반) 파서가 사용할 수 있음을 의미합니다. 이러한 파서는 종종 잘 구성되지 않은 html에서 실패합니다.
- Angular는 속성을 정규화하지만 서버가 아닌 클라이언트에 있다는 것을 기억하십시오.
참고 URL : https://stackoverflow.com/questions/16589853/ng-app-vs-data-ng-app-what-is-the-difference
'IT story' 카테고리의 다른 글
| 시퀀스를 첨자화할 때 파이썬에서 :: (이중 콜론)이란 무엇입니까? (0) | 2020.04.17 |
|---|---|
| 드래그하는 동안 입력 유형 = 범위의 onchange 이벤트가 firefox에서 트리거되지 않습니다 (0) | 2020.04.17 |
| 팬더에서 열 집합 선택 / 제외 (0) | 2020.04.16 |
| Python 응용 프로그램에서 전송 한 전체 HTTP 요청을 어떻게 볼 수 있습니까? (0) | 2020.04.16 |
| 네임 스페이스 란 무엇입니까? (0) | 2020.04.16 |