AngularJS 지시
- 이전 페이지 AngularJS 모듈
- 다음 페이지 AngularJS 모델
AngularJS는 “지시어”의 새로운 속성을 통해 HTML을 확장할 수 있습니다.
AngularJS는应用程序에 기능을 제공할 수 있는 내장 지시어를 가지고 있습니다.
AngularJS는 또한 사용자 정의 지시를 정의할 수 있습니다.
AngularJS 지시
AngularJS 지시는 프렉시스(프리픽스)를 가진 확장된 HTML 속성입니다. ng-。
ng-app 지시는 AngularJS 애플리케이션을 초기화합니다.
ng-init 지시는 애플리케이션 데이터를 초기화합니다.
ng-model 지시는 HTML 컨트롤(input, select, textarea)의 값을 애플리케이션 데이터에 바인딩합니다。
AngularJS 지시에 대한 정보는 AngularJS 지시 참조에서 읽어보세요.
实例
<div ng-app="" ng-init="firstName='Bill'">
<p>이름: <input type="text" ng-model="firstName"></p>
<p>당신이 썼습니다: {{ firstName }}</p>
</div>
ng-app 지시는 AngularJS에 대해 <div> 요소가 AngularJS 애플리케이션의 '소유자'라고 알려줍니다.
데이터 바인딩
위 예제의 {{ firstName }} 표현식은 AngularJS 데이터 바인딩 표현식입니다.
AngularJS에서 데이터 바인딩은 AngularJS 표현식과 AngularJS 데이터를 연결합니다.
{{ firstName }} 와 ng-model="firstName" 연결됩니다.
다음 예제에서, 두 개의 텍스트 필드가 두 개의 ng-model 지시로 연결됩니다:
实例
<div ng-app="" ng-init="quantity=1;price=5">
수량: <input type="number" ng-model="quantity">
비용: <input type="number" ng-model="price">
총 금액: {{ quantity * price }}
</div>
사용하여 ng-init 컨트롤러에 대한 장에서 데이터를 초기화하는 방법을 배울 것입니다.
HTML 요소를 반복하여 복사하는 것은 흔하지 않습니다.
ng-repeat 지시가 반복하여 HTML 요소를 복사합니다:
实例
<div ng-app="" ng-init="names=['Jani','Hege','Kai']">
<ul>
<li ng-repeat="x in names">
{{ x }}
</li>
</ul>
</div>
ng-repeat 지시는 실제로 집합의 각 항목에 대해HTML 요소를 한 번 복사합니다.。
객체 배열에 사용됩니다. ng-repeat 지시:
实例
<div ng-app="" ng-init="names=[
{이름:'Jani',국가:'노르웨이'},
{이름:'Hege',국가:'스웨덴'},
{name:'Kai',country:'Denmark'}]
<ul>
<li ng-repeat="x in names">
{{ x.name + ', ' + x.country }}
</li>
</ul>
</div>
AngularJS는 데이터베이스 CRUD(생성, 읽기, 업데이트, 삭제) 애플리케이션에 매우 적합합니다。
이러한 객체가 데이터베이스의 레코드에서 왔다고 생각해보세요。
ng-app 지시
ng-app ng-init 지시는 AngularJS 애플리케이션의루트 요소。
웹 페이지를 로드할 때ng-app 지시는자동 시작(자동 초기화) 애플리케이션을 정의합니다。
ng-init 지시
ng-init ng-init 지시는 AngularJS 애플리케이션의초기 값。
일반적으로 ng-init을 사용하지 않습니다. 컨트롤러나 모듈을 사용합니다.
앞으로는 컨트롤러와 모듈에 대해 더 많은 정보를 배울 것입니다.
ng-model 지시
ng-model 지시는 HTML 컨트롤(input, select, textarea)의 값을 애플리케이션 데이터에 바인딩합니다。
ng-model 지시는 또한:
- 애플리케이션 데이터에 타입 검증(숫자, 이메일, 필수 사항)을 제공합니다
- 애플리케이션 데이터에 상태(잘못된 값, 더미, 터치, 오류)를 제공합니다
- HTML 요소에 CSS 클래스를 제공합니다
- HTML 요소를 HTML 양식에 바인딩합니다
다음 장에서 더 많은 정보를 읽어보세요 ng-model 지시 정보.
새 지시 생성
모든 내장 AngularJS 지시 이외에도, 자신만의 지시를 생성할 수 있습니다。
새 지시는 다음과 같이 사용하여 생성됩니다 .directive 함수로 생성된.
새 지시를 호출하려면, 새 지시와 같은 태그 이름을 가진 HTML 요소를 생성해야 합니다。
이름 지정할 때는 캐모크릿 스타일을 사용해야 합니다，w3TestDirective하지만 호출할 때는 -로 구분된 이름을 사용해야 합니다，w3-test-directive：
实例
<body ng-app="myApp">
<w3-test-directive></w3-test-directive>
<script>
var app = angular.module("myApp", []);
app.directive("w3TestDirective", function() {
return {
template : "<h1>지시로 만들어졌습니다!</h1>"
});
});
</script>
</body>
지시를 호출하려면 다음과 같은 방식으로 사용할 수 있습니다：
- 요소 이름
- 속성
- 클래스
- 주석
다음 예제는 모두 동일한 결과를 생성합니다：
요소 이름
<w3-test-directive></w3-test-directive>
속성
<div w3-test-directive></div>
클래스
<div class="w3-test-directive"></div>
주석
<!-- directive: w3-test-directive -->
제한
당신의 지시를 호출할 수 있는 특정 메서드로 제한할 수 있습니다.
实例
값을 추가하여 "A" 의 restrict 속성, 이 지시는 속성을 통해만 호출할 수 있습니다:
var app = angular.module("myApp", []);
app.directive("w3TestDirective", function() {
return {
restrict : "A",
template : "<h1>지시로 만들어졌습니다!</h1>"
});
});
합법한 restrict 값은 다음과 같습니다:
E요소 이름을 나타냅니다A속성을 나타냅니다C클래스를 나타냅니다M주석을 나타냅니다
기본적으로, 이 값은 EA이는 요소 이름과 속성 이름 모두 지시를 호출할 수 있음을 의미합니다.
- 이전 페이지 AngularJS 모듈
- 다음 페이지 AngularJS 모델
