지시를 AngularJS와

이전 : AngularJS와 식

다음 : AngularJS와 컨트롤러

새로운 속성은 HTML을 확장 할 AngularJS와 지시에 의해 호출됩니다.

기능을 추가 할 수있는 응용 프로그램에 대한 기본 지침을 AngularJS와.

AngularJS와는 명령을 사용자 정의 할 수 있습니다.

지시를 AngularJS와

AngularJS와 명령은 HTML의 확장이 접두사 ng-와 속성이다.

NG-앱 지침은 AngularJS와 응용 프로그램을 초기화합니다.

NG-INIT 명령은 응용 프로그램 데이터를 초기화한다.

NG 모델은 애플리케이션에 바인딩 (예를 들어, 입력 필드의 값으로) 요소 값을 명령.

전체 지침의 내용에서 찾을 수 있습니다 AngularJS와 참조 설명서 .

예를 AngularJS와

<div ng-app="" ng-init="firstName='John'">

<p>在输入框中尝试输入：</p>
<p>姓名：<input type="text" ng-model="firstName"></p>
<p>你输入的为： {{ firstName }}</p>

</div>

»시도

NG-앱 지시어는 AngularJS와 지시, <div> 요소의 AngularJS와 응용 프로그램입니다 "소유자."

	웹 페이지가 다른 요소에 여러 개의 실행 AngularJS와 응용 프로그램을 포함 할 수 있습니다.

데이터 바인딩

위의 예에서 {{firstName을}}이 AngularJS와 표현은 데이터 바인딩 식이다.

AngularJS와 AngularJS와 표현의 데이터와 동기화 AngularJS와 데이터 바인딩.

{{FIRSTNAME}} ng를 모델 = "firstName을"동기화에 의해.

다음 예에서는 두 개의 텍스트 필드는 두 개의 동기화 명령 NG 모델을 통해 계산된다 :

예를 AngularJS와

<div ng-app="" ng-init="quantity=1;price=5">

<h2>价格计算器</h2>

数量： <input type="number" ng-model="quantity">
价格： <input type="number" ng-model="price">

<p><b>总价：</b> {{ quantity * price }}</p>

</div>

»시도

	사용 NG-초기화는 매우 일반적인 아닙니다. 당신은 컨트롤러 장의 데이터를 초기화 할 수있는 더 좋은 방법을 배우게됩니다.

반복 HTML 요소

NG 반복 명령은 HTML 요소를 반복한다 :

예를 AngularJS와

<사업부의 NG-응용 프로그램 = ""NG-초기화 = "이름 = [ '야니', 'Hege', '카이']">
<P>를 사용하여 배열을 통해 루프 NG가 반복 </ P>
<UL>
<리 NG 반복 = "이름에 X">
{{X}}
</ 리>
</ UL>
</ DIV>

»시도

NG 반복 명령이 오브젝트의 배열에서 사용된다 :

예를 AngularJS와

<div ng-app="" ng-init="names=[
{name:'Jani',country:'Norway'},
{name:'Hege',country:'Sweden'},
{name:'Kai',country:'Denmark'}]">

<p>循环对象：</p>
<ul>
<li ng-repeat="x in names">
{{ x.name + ', ' + x.country }}
</li>
</ul>

</div>

»시도

	CRUD의 AngularJS와 완벽한 지원 데이터베이스 응용 프로그램 (삭제, 읽기, 업데이트 업데이트를 읽고, 생성, 삭제 증가). 데이터베이스의 레코드에 물체의 예를 생각해보십시오.

NG-앱 지시자

NG-앱 지시문은 루트 요소 AngularJS와 응용 프로그램을 정의합니다.

NG-앱 설명 페이지가 자동으로 (자동 초기화) 응용 프로그램을 부팅로드 될 때.

나중에는 ng를-앱을하는 방법을 값으로 코드 모듈에 연결 (예 : NG-응용 프로그램 = "인 MyModule"를) 배울 것입니다.

NG-init 명령

NG-INIT 명령 AngularJS와 응용 프로그램은 초기 값을 정의한다.

정상적인 상황에서는 NG-초기화를 사용하지 마십시오. 당신은 그것을 대체 할 컨트롤러 또는 모듈을 사용합니다.

나중에는 컨트롤러와 모듈에 대한 자세한 내용을 배울 것입니다.

NG 모델 지시어

NG 모델 응용 프로그램 데이터에 대한 지침 바인드 HTML 요소입니다.

NG 모델 지시어는 할 수 있습니다

(필수 번호, 이메일,) 응용 프로그램 데이터 형식의 검증을 제공합니다.
응용 프로그램 데이터 (잘못된, 더러운, 감동, 오류)에 대한 상태를 제공합니다.
HTML 요소의 CSS 클래스를 제공합니다.
HTML 양식에 바인딩 HTML 요소입니다.

NG 반복 명령

각 항목의 컬렉션 (배열)에 대한 NG 반복 명령은 HTML 요소를 복제해야합니다.

사용자 지정 명령 만들기

내장 된 지침에 AngularJS와 또한, 우리는 또한 사용자 정의 명령을 만들 수 있습니다.

.directive 기능 사용자 지정 명령을 추가 할 수 있습니다.

사용자 정의 명령을 호출하려면 HTML 요소에 사용자 지정 명령 이름을 추가해야합니다.

지시문, w3bigDirective의 이름을 혹 방법을 사용하지만, 당신이 필요로 할 때 그것을 사용하는 -분할, w3big-지침 :

예를 AngularJS와

<바디 NG-응용 프로그램 = "을 myApp ">

<W3big-지시문> </ w3big -directive>

<스크립트>
var에 응용 = angular.module ( "을 myApp", []);
app.directive ( "w3bigDirective"함수 () {
{반환
템플릿 : "<H1> 명령 </ H1>!"
};
});
</ 스크립트>

</ BODY>

»시도

다음과 같은 방법으로 명령을 호출 할 수 있습니다 :