AngularJS 지시어


AngularJS는 Directives라는 새로운 속성으로 HTML을 확장합니다.

AngularJS는 내장된 지시문을 통해 애플리케이션에 기능을 추가합니다.

AngularJS를 사용하면 지시어를 맞춤설정할 수 있습니다.

AngularJS 지시문

AngularJS 지시문은 ng- 접두사가 붙은 확장 HTML 속성입니다.

ng-app 지시문은 AngularJS 애플리케이션을 초기화합니다.

ng-init 명령은 애플리케이션 데이터를 초기화합니다.

ng-model 지시문은 요소 값(예: 입력 필드 값)을 애플리케이션에 바인딩합니다.

전체 지침 내용을 보려면 AngularJS 참조 매뉴얼을 참조하세요.

Instance

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script> 
</head>
<body>

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

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

</div>

</body>
</html>

Run Instance»

온라인 인스턴스를 보려면 "인스턴스 실행" 버튼을 클릭하세요.

ng-app 지시어는 AngularJS에 <div> AngularJS application" ".

Note웹 페이지에는 다양한 요소에서 실행되는 여러 AngularJS 애플리케이션이 포함될 수 있습니다.

Data Binding

위 예제의 {{ firstName }} 표현식은 AngularJS 데이터 바인딩 표현식입니다.

AngularJS의 데이터 바인딩은 AngularJS 표현식과 AngularJS 데이터를 동기화합니다.

{{ firstName }}은 ng-model="firstName"을 통해 동기화됩니다.

다음 예에서는 두 개의 텍스트 필드가 두 개의 ng-model 지시문을 통해 동기화됩니다.

Instance

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script> 
</head>
<body>

<div data-ng-app="" data-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>

</body>
</html>

Run Instance»

온라인 예제를 보려면 "인스턴스 실행" 버튼을 클릭하세요

Note ng-init을 사용하는 것은 흔하지 않습니다. 컨트롤러 장에서 데이터를 초기화하는 더 나은 방법을 배우게 됩니다.
yuan HTML 요소 반복

Ng-Repeat

HTML 요소 반복 지침: 

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script> 
</head>
<body>

<div data-ng-app="" data-ng-init="names=['Jani','Hege','Kai']">
  <p>使用 ng-repeat 来循环数组</p>
  <ul>
    <li data-ng-repeat="x in names">
      {{ x }}
    </li>
  </ul>
</div>

</body>
</html>

예제 실행 » 온라인 인스턴스를 보려면 "예제 실행" 버튼을 클릭하세요.

Ng- 반복 명령은 개체 배열에 사용됩니다.

Instance

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script> 
</head>
<body>

<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>

</body>
</html>

Run Instance»온라인 인스턴스를 보려면 "인스턴스 실행" 버튼을 클릭하세요.

AngularJS는 완벽하게 지원합니다. 데이터베이스의 CRUD(생성, 읽기, 업데이트, 삭제 증가) 애플리케이션.

ng-app 지시문

ng-app 지시문은 AngularJS 애플리케이션의 루트 요소를 정의합니다.

ng-app 명령은 웹 페이지가 로드될 때 애플리케이션을 자동으로 부팅(자동 초기화)합니다.

나중에 ng-app이 값(예: ng-app="myModule")을 통해 코드 모듈에 연결되는 방법을 배우게 됩니다.

ng-init 지시문

ng-init 지시문은 AngularJS 애플리케이션의 초기 값을 정의합니다.

일반적으로 ng-init는 사용되지 않습니다. 그 자리에 컨트롤러나 모듈을 사용하게 됩니다.

컨트롤러와 모듈에 대해서는 나중에 자세히 배우게 됩니다.

ng-model 지시문

ng-model 지시문 HTML 요소를 애플리케이션 데이터에 바인딩 합니다.

ng-model 지시문은 다음을 수행할 수도 있습니다.

  • 애플리케이션 데이터에 대한 유형 유효성 검사(번호, 이메일, 필수)를 제공합니다.

  • 애플리케이션 데이터에 대한 상태(잘못됨, 더러움, 접촉됨, 오류)를 제공합니다.

  • HTML 요소에 대한 CSS 클래스를 제공합니다.

  • HTML 요소를 HTML 양식에 바인딩합니다.

ng-repeat 지시문

ng-repeat 지시문은 컬렉션(배열)의 각 항목에 대해 HTML 요소를 한 번씩 복제합니다.


사용자 지정 지시문 만들기

AngularJS에 내장된 지시문 외에도 사용자 지정 지시문을 만들 수도 있습니다.

.directive 기능을 사용하여 사용자 지정 지시문을 추가할 수 있습니다.

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

디렉티브 이름을

phpDirective로 지정하려면 카멜 케이스를 사용하세요. 하지만 사용할 때는 -로 나누어야 합니다. php-directive:

Instance

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script> 
</head>
<body ng-app="myApp">

<php-directive></php-directive>

<script>
var app = angular.module("myApp", []);
app.directive("phpDirective", function() {
    return {
        template : "<h1>自定义指令!</h1>"
    };
});
</script>

</body>
</html>

Run Instance»클릭 온라인 예제를 보려면 "인스턴스 실행" 버튼을 클릭하세요.

다음과 같은 방법으로 명령을 호출할 수 있습니다. 는 다음 예제 메소드도 출력될 수 있습니다. 동일한 결과:

    요소 이름

  • Instance
  • <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script> 
</head>
<body ng-app="myApp">

<php-directive></php-directive>

<script>
var app = angular.module("myApp", []);
app.directive("phpDirective", function() {
    return {
        template : "<h1>自定义指令!</h1>"
    };
});
</script>

</body>
</html>

    • 인스턴스 실행»

  • 온라인 인스턴스를 보려면 "인스턴스 실행" 버튼을 클릭하세요

  • 속성

Instance

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script> 
</head>
<body ng-app="myApp">

<div php-directive></div>

<script>
var app = angular.module("myApp", []);
app.directive("phpDirective", function() {
    return {
        template : "<h1>自定义指令!</h1>"
    };
});
</script>

</body>
</html>

인스턴스 실행 »

온라인 인스턴스를 보려면 "인스턴스 실행" 버튼을 클릭하세요

클래스 이름

Instance
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script> 
</head>
<body ng-app="myApp">

<div class="php-directive"></div>

<script>
var app = angular.module("myApp", []);
app.directive("phpDirective", function() {
    return {
        restrict : "C",
        template : "<h1>自定义指令!</h1>"
    };
});
</script>

<p><strong>注意：</strong> 你必须设置 <b>restrict</b> 的值为 "C" 才能通过类名来调用指令。</p>

</body>
</html>


인스턴스 실행»

온라인 인스턴스를 보려면 "인스턴스 실행" 버튼을 클릭하세요.

Notes

Instance

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script> 
</head>
<body ng-app="myApp">

<!-- directive: php-directive -->

<script>
var app = angular.module("myApp", []);
app.directive("phpDirective", function() {
    return {
        restrict : "M",
        replace : true,
        template : "<h1>自定义指令!</h1>"
    };
});
</script>

<p><strong>注意：</strong> 我们需要在该实例添加 <strong>replace</strong> 属性， 否则评论是不可见的。</p>

<p><strong>注意：</strong> 你必须设置 <b>restrict</b> 的值为 "M" 才能通过注释来调用指令。</p>

</body>
</html>

인스턴스 실행»

"인스턴스 실행" 버튼을 클릭하여 온라인 인스턴스

사용 제한

특정 방식으로만 명령이 호출되도록 제한할 수 있습니다.

Instance

restrict 속성을 추가하고 값을 "A"로 설정하면, 명령을 설정하려면 속성을 통해서만 호출할 수 있습니다. "A", 来设置指令只能通过属性的方式来调用:

实例

<!DOCTYPE html>
<html><head>
<meta charset="utf-8">
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script> 
</head>
<body ng-app="myApp">

<php-directive></php-directive>

<div php-directive></div>

<script>
var app = angular.module("myApp", []);
app.directive("phpDirective", function() {
    return {
        restrict : "A",
        template : "<h1>自定义指令!</h1>"
    };
});
</script>

<p><strong>注意：</strong> 通过设置 <strong>restrict</strong> 属性值为 "A" 来设置指令只能通过 HTML 元素的属性来调用。</p>

</body>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例

restrict 值可以是以下几种:

  • E 作为元素名使用

  • A 作为属性使用

  • C 作为类名使用

  • M 作为注释使用

restrict 默认值为 EA

Instance🎜🎜rrreee🎜🎜🎜인스턴스 실행»🎜🎜온라인 인스턴스를 보려면 "인스턴스 실행" 버튼을 클릭하세요🎜🎜🎜🎜🎜restrict🎜 값은 다음과 같습니다. 다음과 같습니다: 🎜
  • 🎜E는 요소 이름으로 사용됩니다🎜
  • 🎜A를 속성으로 사용🎜
  • 🎜C를 클래스 이름으로 사용🎜
  • 🎜M을 클래스 이름으로 사용 Annotation🎜
🎜 🎜restrict🎜 기본값은 EA입니다. 즉, 요소 ​​이름과 속성 이름을 통해 명령어를 호출할 수 있습니다. 🎜🎜
←
→

PHP 중국어 웹사이트

집집강의강의기사기사Q&AQ&A사전사전수동수동다운로드다운로드찾다찾다APP다운로드 APP다운로드
Note인스턴스의 개체를 데이터베이스의 레코드로 생각하세요.