AngularJS 사용자 정의 지시

AngularJS에서 커스텀 명령을 사용하여 HTML 기능을 확장합니다. '명령' 기능을 사용하여 커스텀 명령을 정의합니다. 커스텀 명령은 활성화된 요소만을 대체합니다. 초기화 중 AngularJS 애플리케이션이 일치하는 요소를 찾아 그의compile()custom 명령의 메서드가 한 번 활성화되면link()명령의 범위에 따라 custom 명령의 메서드를 사용하여 요소를 처리합니다. AngularJS는 다음과 같은 요소 유형에 커스텀 명령을 생성할 수 있습니다.

요소 명령 − 일치하는 요소를 만나면 명령이 활성화됩니다
속성 − 일치하는 속성을 만나면 명령이 활성화됩니다
CSS − 일치하는 CSS 스타일을 만나면 명령이 활성화됩니다
주석 − 일치하는 주석을 만나면 명령이 활성화됩니다

커스텀 명령에 대해 이해하세요

커스텀 html 태그 정의

<student　name　=　"Sea"></student><br/><student name="Piyush"></student>

위의 커스텀 html 태그를 처리하기 위해 커스텀 명령 정의

var　mainApp　=　angular.module("mainApp",　[]);
//첫 번째 매개변수는 추가할 html 요소입니다. 명령을 생성합니다	　　
//학생 html 태그를 추가하겠습니다　
//html에서 Student 요소가 발견되면 이 명령이 활성화됩니다
mainApp.directive('student',　function()　{
　　　//명령 객체 정의
　　　var　directive　=　{};
　　　
　　　//limit = E는 이 명령이 Element 명령임을 의미합니다
　　　directive.restrict　=　'E';
　　　
　　　//템플릿은 전체 요소를 텍스트로 대체합니다。　
　　　directive.template　=　"학생:　<b>{{student.name}}</b>　,　
　　　　　　Roll No: <b>{{student.rollno}}</b>/b>";
　　　
　　　//스코프는 각 학생 요소를 구분하기 위해 조건에 따라 사용됩니다.
　　　directive.scope　=　{
　　　　　　student　:　"=name"
　　　}
　　　
　　　//프로그램 초기화 기간에 compile을 호출합니다. AngularJS가 호출합니다.　
　　　　　　it　once　when　html　page　is　loaded.
　　　directive.compile　=　function(element,　attributes)　{
　　　　　　element.css("border",　"1px　solid　#cccccc");
　　　　　　
　　　　　　//linkFunction은 범위를 가진 각 요소와 연결하여 요소 특정 데이터를 얻습니다.
　　　　　　var　linkFunction　=　function($scope,　element,　attributes)　{
　　　　　　　　　element.html("학생:　<b>"+$scope.student.name　+"</b>　,　
　　　　　　　　　　　　Roll　No:　<b>"+$scope.student.rollno+"</b><br/>
　　　　　　　　　element.css("background-color",　"#ff00ff");
　　　　　　}
　　　　　　return　linkFunction;
　　　}
　　　
　　　return　directive;
});

지시의 범위를 업데이트하기 위해 컨트롤러를 정의합니다. 여기서는 name 속성의 값을 범위의 서브 레벨로 사용합니다.

mainApp.controller('StudentController',　function($scope)　{
　　　$scope.Sea　=　{};
　　　$scope.Sea.name　=　"Sea　Gull";
　　　$scope.Sea.rollno　　=　1;
　　　
　　　$scope.Piyush　=　{};
　　　$scope.Piyush.name　=　"Piyush　Gull";
　　　$scope.Piyush.rollno　　=　2;
});

온라인 예제

예제

<html>
　　　<head>
　　　　　　<title>AngularJS-사용자 정의 지시/title>
　　　</head>
　　　
　　　<body>
　　　　　　<h2>AngularJS-사용자 정의 지시사 예제</h2>
　　　　　　
　　　　　　<div　ng-app　=　"mainApp"　ng-controller　=　"StudentController">
　　　　　　　　　<student　name　=　"Sea"></student><br/>
　　　　　　　　　<student　name　=　"Piyush"></student>
　　　　　　</div>
　　　　　　　　
　　　　　　<script　src　=　"https://cdn.staticfile.org/angular.js/1.3.14/angular.min.js"></script>
　　　　　　
　　　　　　<script>
　　　　　　　　　var　mainApp　=　angular.module("mainApp",　[]);
　　　　　　　　　
　　　　　　　　　mainApp.directive('student',　function()　{
　　　　　　　　　　　　var　directive　=　{};
　　　　　　　　　　　　directive.restrict　=　'E';
　　　　　　　　　　　　directive.template　=　"학생:　<b>{{student.name}}</b>　,　Roll　No:　<b>{{student.rollno}}</b>";
　　　　　　　　　　　　
　　　　　　　　　　　　directive.scope　=　{
　　　　　　　　　　　　　　　student　:　"=name"
　　　　　　　　　　　　}
　　　　　　　　　　　　
　　　　　　　　　　　　directive.compile　=　function(element,　attributes)　{
　　　　　　　　　　　　　　　element.css("border",　"1px　solid　#cccccc");
　　　　　　　　　　　　　　　
　　　　　　　　　　　　　　　var　linkFunction　=　function($scope,　element,　attributes)　{
　　　　　　　　　　　　　　　　　　element.html("학생:　<b>"+$scope.student.name　+"</b>　,　Roll　No:　<b>"+$scope.student.rollno+"</b><br/>
　　　　　　　　　　　　　　　　　　element.css("background-color",　"#ff00ff");
　　　　　　　　　　　　　　　}
　　　　　　　　　　　　　　　return　linkFunction;
　　　　　　　　　　　　}
　　　　　　　　　　　　
　　　　　　　　　　　　return　directive;
　　　　　　　　　});
　　　　　　　　　
　　　　　　　　　mainApp.controller('StudentController',　function($scope)　{
　　　　　　　　　　　　$scope.Sea　=　{};
　　　　　　　　　　　　$scope.Sea.name　=　"Sea　Gull";
　　　　　　　　　　　　$scope.Sea.rollno　　=　1;
　　　　　　　　　　　　$scope.Piyush　=　{};
　　　　　　　　　　　　$scope.Piyush.name　=　"Piyush　Gull";
　　　　　　　　　　　　$scope.Piyush.rollno　　=　2;
　　　　　　　　　});
　　　　　　</script>
　　　　　　
　　　</body>
</html>

테스트를 보세요‹/›

출력 결과

웹 브라우저에서 열기textAngularJS.htm결과 확인。

AngularJS 국제화 AngularJS 의존성 주입

AngularJS 기본 강의

AngularJS 사용자 정의 지시

커스텀 명령에 대해 이해하세요

온라인 예제