AngularJS에서 사용자 지정 지시문 제한

Muhammad Adil 2022년5월23일

Angular Angular Directive

지시문은 HTML 요소의 기능을 확장하거나 순수 HTML에서는 사용할 수 없는 풍부한 동작으로 새로운 기능을 만드는 데 사용되는 특수한 유형의 AngularJS 구성 요소입니다.

AngularJS에는 ngBind, ngModel 및 ngClass와 같은 사전 빌드 지시문이 포함되어 있습니다. Angular 프레임워크는 이러한 지시문을 사용하여 브라우저에 새 HTML 태그를 지시합니다.

HTML 태그 및 주석, CSS 클래스 및 속성은 지시문의 예입니다.

제한 지시문은 속성을 추가하여 외부 HTML 코드에서 DOM 요소에 대한 액세스를 제한합니다.

이 기사에서는 AngularJS에서 사용자 지정 지시문을 제한하는 방법에 대해 설명합니다.

AngularJS 지시문 제한 `A` 대 `E`

restrict 속성은 Angular에 한 글자 길이의 새 지시문을 만드는 방법을 알려줍니다. A, C, E, M 또는 이러한 값의 조합(예: EA, ME 등)의 네 가지 값을 가질 수 있습니다.

각각의 방식은 중요합니다.

제한된 값과 그 의미는 다음과 같습니다.

E는 요소로만 사용할 수 있음을 나타냅니다.
A는 속성으로만 사용할 수 있음을 나타냅니다.
C는 클래스 속성으로만 유효합니다.
M은 댓글에만 적용됩니다.

지시어의 이름이 hello라고 가정합니다. 다음은 종류와 용도입니다.

A = <div hello></div>
C = <div class="hello"></div>
E = <hello data="Demo"></hello>
M = <!--directive:hello -->

템플릿을 담당하는 컴포넌트를 개발할 때 요소를 사용하십시오. 이것은 템플릿 측면에 대한 도메인별 언어를 구성할 때 일반적인 시나리오입니다.

기존 요소에 새로운 기능을 추가할 때 속성을 사용하십시오.

요소가 아닌 속성을 활용할 때 동일한 DOM 노드에 여러 지시문을 적용할 수 있습니다.

이것은 많은 태그의 구성 요소를 묶지 않고도 추가 속성을 사용하여 레이블을 강조 표시, 비활성화 또는 추가할 수 있는 양식 컨트롤에 특히 유용합니다.

예(자바스크립트):

var app = angular.module('myapp', []);
app.controller('MainCtrl', function($scope) {
    $scope.name = 'World';
});
app.directive('helloWorld',function(){
    return {
        replace:true,
        restrict: 'E',
        template: '<h2>Hello World</h2>'
    }
});

예(HTML):

<!DOCTYPE html>
<html ng-app="myapp">
    <head>
        <meta charset="utf-8" />
        <script>document.write('<base href="' + document.location + '" />');</script>
        <script data-require="angular.js@1.2.x" src="http://code.angularjs.org/1.2.7/angular.js" data-semver="1.2.7"></script>
        <script src="app.js"></script>
    </head>
    <body ng-controller="MainCtrl">
        <hello-world></hello-world>
        <div hello-world></div>
        <div class="hello-world"></div>
    </body>
</html>

코드의 라이브 데모를 확인하려면 여기를 클릭하십시오.

작가: Muhammad Adil

Muhammad Adil is a seasoned programmer and writer who has experience in various fields. He has been programming for over 5 years and have always loved the thrill of solving complex problems. He has skilled in PHP, Python, C++, Java, JavaScript, Ruby on Rails, AngularJS, ReactJS, HTML5 and CSS3. He enjoys putting his experience and knowledge into words.

Facebook

AngularJS 지시문 제한 A 대 E

관련 문장 - Angular Directive

AngularJS 지시문 제한 `A` 대 `E`