programing

AngularJS 태그 속성

nasanasas 2020. 12. 25. 10:07
반응형

AngularJS 태그 속성


AngularJS에 대해 배우고 있으며 다음과 같이 표준 html 태그 속성이 아닌 데이터로 시작하지 않는 자체 속성을 추가하는 것을 봅니다.

<html ng-app>

아니면 이거:

<body ng-controller="PhoneListCtrl">

이러한 ng- * 속성은 어디에서 왔으며 유효한 HTML입니까? 이에 대한 자세한 내용은 어디에서 읽을 수 있습니까?


엄밀히 말하면 이러한 추가 속성은 HTML 사양에 정의되어 있지 않으므로 유효한 HTML이 아닙니다. AngularJS가 HTML 사양의 상위 집합을 제공하고 구문 분석한다고 말할 수 있습니다.

그러나 v1.0.0rc1부터는 <html data-ng-app>유효한 HTML5 인 data- * 속성을 사용할 수 있습니다 . 소스 .

프로세스에 대한 더 많은 정보가 포함 된 AngularJS 컴파일러에 대한 가이드 가 있습니다. 간단히 말해서 AngularJS 컴파일러는 이러한 속성을 사용하여 HTML 페이지를 읽어로드 한 후 javascript 및 HTML DOM을 통해 페이지를 편집하고 업데이트합니다.


문서에서 : http://docs.angularjs.org/guide/directive

<!doctype html>
<html data-ng-app>
  <head>
    <script src="http://code.angularjs.org/1.0.7/angular.min.js"></script>
    <script src="script.js"></script>
  </head>
  <body>
    <div data-ng-controller="Ctrl1">
      These are all valid directive declarations:<br/>
      <input ng-model='name'> <hr/>
      <span ng:bind="name"></span> <br/>
      <span ng_bind="name"></span> <br/>
      <span ng-bind="name"></span> <br/>          
      <span x-ng-bind="name"></span> <br/>
      <span data-ng-bind="name"></span> <br/>
    </div>
  </body>
</html>

data-*whatever*HTML5를 준수하므로 선언이 가장 마음에 듭니다.

그래서 내 각도 선언 (예를 들어, 어떤을 위해 ng-controller, ng-app, ng-repeat등) 또는 사용자 정의 지시어 나는 항상 그들을 앞에 있습니다 data-.


이러한 ng- * 속성은 어디에서 왔습니까?

기본 ng 모듈에서 . 소스 코드 .

유효한 HTML입니까?

아니요. 그러나 속성 스타일 지시문에는 x- 또는 data- 접두어를 붙여 HTML 유효성 검사기를 준수 할 수 있습니다. direcives 문서를 참조하십시오 .


또 다른 옵션은 정의되지 않은 속성 이름을 무시하는 것입니다. Eclipse를 사용하는 경우 project로 이동하여 설정할 수 있습니다 properties>>validation>>html syntax>>attributes>>ignore undefined attribute names.

참조 URL : https://stackoverflow.com/questions/12107504/angularjs-tags-attributes

반응형