AngularJS 디렉티브 제한 A와 E
난 작은 팀에서 일하고 있어 Angular에 빌딩을 짓고 있어JS는 기본적인 표준과 베스트 프랙티스를 유지하려고 합니다.특히 Angular는 비교적 새로운 회사입니다.
제 질문은 디렉티브에 관한 것입니다.더 정확히 말하면restrict옵션들.
우리 중 몇몇은restrict: 'E'따라서 가지고 있다<my-directive></my-directive>를 참조해 주세요.
다른 사용자가 사용하고 있습니다.restrict: 'A'가지고 있다<div my-directive></div>를 참조해 주세요.
그럼 물론, 당신은 그것을 사용할 수 있습니다.restrict: 'EA'위 중 하나를 사용합니다.
현재로선 별 문제가 없지만, 이 프로젝트가 최대한 큰 규모로 진행될 경우, 저는 이 프로젝트를 보고 있는 모든 사람이 무슨 일이 벌어지고 있는지 쉽게 이해할 수 있기를 바랍니다.
일의 속성 또는 요소 방법 중 하나에 대한 장단점이 있습니까?
속성보다 say element를 선택할 때 알아야 할 함정이 있습니까?
restrict는 디렉티브유형을 정의하기 위한 것으로, 다음과 같이 할 수 있습니다.A(속성),C(클래스),E(요소), 및M(comment), 디렉티브의 이름은 다음과 같습니다.Doc:
유형 : 사용방법
A =
<div Doc></div>C =
<div class="Doc"></div>E =
<Doc data="book_data"></Doc>M =
<!--directive:Doc -->
Atribute 대 Element는 언제 사용해야 합니까?템플릿을 제어하는 구성요소를 작성할 때 요소를 사용하십시오.일반적으로 템플릿의 일부에 대해 도메인 고유의 언어를 작성하는 경우가 있습니다.기존 요소를 새로운 기능으로 꾸밀 때는 속성을 사용합니다.
완전한 답변을 얻으려면 함정에 대한 다음 주석을 편집하십시오.
Internet Explorer <= 8에서 실행되어야 하는 앱을 만들고 있으며, Angular에 의해 지원이 중단되었다고 가정합니다.AngularJS 1.3의 JS 팀은 이 기능을 사용하려면 다음 지침을 따라야 합니다.
restrict 옵션은 일반적으로 다음과 같이 설정됩니다.
- 'A' - 속성 이름만 일치합니다.
- 'E' - 요소 이름만 일치합니다.
- 'C' - 클래스 이름만 일치합니다.
- 'M' - 코멘트만 일치합니다.
여기 문서 링크가 있습니다.
요소는 IE8에서 지원되지 않습니다.즉, IE8에서 커스텀 태그를 받아들이려면 몇 가지 작업을 수행해야 합니다.
요소보다 Atribute를 사용하는 장점 중 하나는 동일한 DOM 노드에 여러 디렉티브를 적용할 수 있다는 것입니다.이 기능은 요소를 태그 묶음으로 묶지 않고도 라벨 등을 추가 속성으로 강조 표시, 비활성화 또는 추가할 수 있는 폼 컨트롤 등에 특히 유용합니다.
제가 알기로는 함정 중 하나는 커스텀 요소에 관한 IE의 문제입니다.문서에서 인용한 바와 같이:
3) (대신 속성 버전 사용)과 같은 커스텀 요소 태그를 사용하지 않습니다.
4) 커스텀 요소 태그를 사용하는 경우 IE 8 이하를 만족시키기 위해 다음 절차를 수행해야 합니다.
<!doctype html>
<html xmlns:ng="http://angularjs.org" id="ng-app" ng-app="optionalModuleName">
<head>
<!--[if lte IE 8]>
<script>
document.createElement('ng-include');
document.createElement('ng-pluralize');
document.createElement('ng-view');
// Optionally these for CSS
document.createElement('ng:include');
document.createElement('ng:pluralize');
document.createElement('ng:view');
</script>
<![endif]-->
</head>
<body>
...
</body>
</html>
함정:
- html과 같은
<my-directive></my-directive>회피책이 없으면 IE8에서는 동작하지 않습니다(https://docs.angularjs.org/guide/ie) - 독자적인 html 요소를 사용하면 html 검증에 실패합니다.
- 1개의 파라미터가 같은 디렉티브는 다음과 같이 실행할 수 있습니다.
<div data-my-directive="ValueOfTheFirstParameter"></div>
이것 대신:
<my-directive my-param="ValueOfTheFirstParameter"></my-directive>
커스텀 html 요소는 사용하지 않습니다.이것이 2가지 경우입니다.
서드파티 프레임워크에 의한 모든 지시는 다음 두 가지 방법으로 작성할 수 있습니다.
<my-directive></my-directive>
또는
<div data-my-directive></div>
같은 것을 합니다.
요소에 관한 2가지 문제:
- 이전 브라우저에서의 지원이 잘못되었다.
- SEO - 구글의 엔진은 그들을 좋아하지 않는다.
속성을 사용합니다.
언급URL : https://stackoverflow.com/questions/23220976/angularjs-directive-restrict-a-vs-e
'programing' 카테고리의 다른 글
| Swift에서 URL을 여는 방법 (0) | 2023.04.09 |
|---|---|
| 데이터 테이블 에이잭스 호출 성공 시 함수를 호출한다. (0) | 2023.04.04 |
| wordpress에서 wp_mail() 함수를 사용하는 방법 (0) | 2023.04.04 |
| typescript 인터페이스에는 두 가지 속성 중 하나가 필요합니다. (0) | 2023.04.04 |
| 토큰 기반 인증을 사용하는 경우 이미지를 로드하는 방법 (0) | 2023.04.04 |