AngularJS Directives

AngularJS ay nagbibigay ng kapangyarihan sa iyo na gamitin ang tinatawag na "direktibang bagong katangian upang palakasin ang HTML.

AngularJS ay may grupo ng nakalagay na direktiba, na maaaring magbigay ng kakayahan sa iyong aplikasyon.

AngularJS 还允许您定义自己的指令。

AngularJS Directives

AngularJS 指令是扩展的 HTML 属性，带有前缀 ng-.

ng-app 指令初始化 AngularJS 应用程序。

ng-init 指令初始化应用程序数据。

ng-model Ang utos ay ibibind ang halaga ng HTML control (input, select, textarea) sa datos ng aplikasyon.

请在我们的 AngularJS 指令参考中阅读有关所有 AngularJS 指令的信息。

Instance

<div ng-app="" ng-init="firstName='Bill'">
<p>Name: <input type="text" ng-model="firstName"></p>
<p>You wrote: {{ firstName }}</p>
</div>

Try It Yourself

ng-app 指令还告诉 AngularJS，<div> 元素是 AngularJS 应用程序的“所有者”。

数据绑定

上例中的 {{ firstName }} 表达式是一个 AngularJS 数据绑定表达式。

AngularJS 中的数据绑定将 AngularJS 表达式与 AngularJS 数据进行绑定。

{{ firstName }} 与 ng-model="firstName" 绑定在一起。

在下一个例子中，两个文本字段通过两个 ng-model 指令绑定在一起：

Instance

<div ng-app="" ng-init="quantity=1;price=5">
Quantity: <input type="number" ng-model="quantity">
Costs:    <input type="number" ng-model="price">
Total in dollar: {{ quantity * price }}
</div>

Try It Yourself

使用 ng-init 并不常见。你将在关于控制器的章节中学习如何初始化数据。

重复 HTML 元素

ng-repeat 指令重复 HTML 元素：

Instance

<div ng-app="" ng-init="names=['Jani','Hege','Kai']">
  <ul>
    <li ng-repeat="x in names">
      {{ x }}
    </li>
  </ul>
</div>

Try It Yourself

ng-repeat 指令实际上为集合中的每个项目克隆一次 HTML 元素.

用于对象数组的 ng-repeat 指令：

Instance

<div ng-app="" ng-init="names=[
{name:'Jani',country:'Norway'},
{name:'Hege',country:'Sweden'},
{name:'Kai',country:'Denmark'}]
<ul>
  <li ng-repeat="x in names">
    {{ x.name + ', ' + x.country }}
  </li>
</ul>
</div>

Try It Yourself

Ang AngularJS ay napakagugustuhan para sa aplikasyon ng CRUD (create, read, update, delete) ng database.

Isipin kung ang mga bagay na ito ay mula sa rekord ng database.

Utos ng ng-app

ng-app Ang utos ng ng-init ay nagtatalaga ngRoot element.

kapag inilagay ang pahina sa pag-load:ng-app Ang utos ay ibibindAuto-bootstrapang aplikasyon (auto-initialize).

Utos ng ng-init

ng-init Ang utos ng ng-init ay nagtatalaga ngInitial value.

Higit sa lahat, hindi mo gagamitin ang ng-init. gagamitin mo ang controller o module.

Malaman mo sa hinaharap ang mas maraming impormasyon tungkol sa controller at module.

Utos ng ng-model

ng-model Ang utos ay ibibind ang halaga ng HTML control (input, select, textarea) sa datos ng aplikasyon.

ng-model Maaari rin ang utos na:

  • Ibigay ang pag��证 ng uri ng datos ng aplikasyon (number, email, required).
  • Ibigay ang estado ng datos ng aplikasyon (invalid, dirty, touched, error).
  • Ibigay ang klase ng CSS sa HTML element.
  • Ibind ang HTML element sa HTML form.

Basa sa susunod na kabanata ang mas maraming impormasyon tungkol sa ng-model Ang impormasyon ng utos.

Lumikha ng bagong utos

Bukod sa lahat ng binilang na utos ng AngularJS, maaari mo ring lumikha ng sariling utos.

Ang bagong utos ay ginawa sa pamamagitan ng paggamit ng .directive ng gumawa ng function.

Para tumawag sa bagong utos, lumikha ng HTML elementong may katumbas na pangalang marka ng bagong utos.

Kailangan gamitin ang camelCase kapag pinangalanan ang utos:w3TestDirective, ngunit dapat gamitin ang - na pagtatangi sa pangalan kapag tinatawag ito:w3-test-directive:

Instance

<body ng-app="myApp">
<w3-test-directive></w3-test-directive>
<script>
var app = angular.module("myApp", []);
app.directive("w3TestDirective", function() {
  return {
    template : "<h1>Made by a directive!</h1>"
  });
});
</script>
</body>

Try It Yourself

Maaari mong gumamit ng sumusunod na paraan upang tumawag sa utos:

  • Elementong pangalan
  • Atributo
  • Klase
  • Komento

Ang mga halimbawa na ito ay magiging katulad na resulta:

Elementong pangalan

<w3-test-directive></w3-test-directive>

Try It Yourself

Atributo

<div w3-test-directive></div>

Try It Yourself

Klase

<div class="w3-test-directive"></div>

Try It Yourself

Komento

<!-- directive: w3-test-directive -->

Try It Yourself

Limitasyon

Maaari mong limitahan ang iyong direktiba para lamang sa pamamagitan ng ilang mga paraan ng pagtawag.

Instance

Sa pamamagitan ng pagdaragdag ng isang halaga na "A" ng restrict Attribute, ang direktiba ay puwedeng tumawag sa pamamagitan ng attribute lamang:

var app = angular.module("myApp", []);
app.directive("w3TestDirective", function() {
  return {
    restrict : "A",
    template : "<h1>Made by a directive!</h1>"
  });
});

Try It Yourself

Ang lehitimong halaga ng restrict ay:

  • E Nangangahulugan na pangalan ng elemento
  • A Nangangahulugan na attribute
  • C Nangangahulugan na klase
  • M Nangangahulugan na komento

Sa pangkaraniwan, ang halaga ng ito ay EAIto ay nangangahulugan na ang pangalan ng elemento at pangalan ng attribute ay maaaring tumawag sa direktiba.