AngularJS instruktioner

AngularJS tillåter dig att använda kallad “instruktionerny egenskap för att utöka HTML.

AngularJS har ett uppsättning inbyggda instruktioner som kan ge din applikation funktioner.

AngularJS tillåter också att du definierar egna instruktioner.

AngularJS instruktioner

AngularJS-instruktioner är utökade HTML-attribut med prefixet ng-.

ng-app Instruktioner initierar AngularJS-applikationen.

ng-init Instruktioner initierar applikationsdata.

ng-model Instruktioner binder värdet för HTML-kontroller (input, select, textarea) till applikationsdata.

Läs mer om alla AngularJS-instruktioner i vår AngularJS-instruktioner-referens.

exempel

<div ng-app="" ng-init="firstName='Bill'">
<p>Namn: <input type="text" ng-model="firstName"></p>
<p>Du skrev: {{ firstName }}</p>
</div>

Prova själv

ng-app instruktionen informerar också AngularJS att <div>-elementet är ägaren till AngularJS-applikationen.

databindning

i föregående exempel {{ firstName }} Ett uttryck är ett AngularJS-databindningsuttryck.

Databindning i AngularJS binder AngularJS-uttryck till AngularJS-data.

{{ firstName }} och ng-model="firstName" bundna samman.

I nästa exempel är två textfält bundna samman genom två ng-model-instruktioner:

exempel

<div ng-app="" ng-init="quantity=1;price=5">
Antal: <input type="number" ng-model="quantity">
Kostnader:    <input type="number" ng-model="price">
Totalt i dollar: {{ quantity * price }}
</div>

Prova själv

Använd ng-init är inte så vanligt. Du kommer att lära dig hur du initierar data i avsnittet om kontroller.

att upprepa HTML-element

ng-repeat Instruktion för att upprepa HTML-element:

exempel

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

Prova själv

ng-repeat instruktionen faktiskt för varje objekt i samlingenklonar en HTML-element en gång.

används för objektmängder ng-repeat Instruktion:

exempel

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

Prova själv

AngularJS är mycket lämpligt för databas CRUD (skapa, läsa, uppdatera, ta bort) applikationer.

Tänk dig att dessa objekt kommer från databasposter.

ng-app-instruktion

ng-app Instruktioner definierar AngularJS-applicasjonensRotelement.

när sidan laddas:ng-app Instruktioner kommer attAutomatisk startapplikation (automatisk initiering).

ng-init-instruktion

ng-init Instruktioner definierar AngularJS-applicasjonensInitialvärde.

Normalt använder du inte ng-init. Du kommer att använda kontrollorer eller moduler istället.

Du kommer att lära dig mer om kontrollorer och moduler senare.

ng-model-instruktion

ng-model Instruktioner binder värdet för HTML-kontroller (input, select, textarea) till applikationsdata.

ng-model Instruktioner kan också:

  • Ge applikationsdata typvalidering (nummer, e-post, obligatorisk)
  • Ge applikationsdata tillstånd (ogiltig, smutsig, berörd, fel)
  • Ge HTML-element CSS-klasser
  • Binda HTML-element till HTML-formulär

Läs mer om ng-model Instruktionens information.

Skapa nya instruktioner

Förutom alla inbyggda AngularJS-instruktioner kan du skapa egna instruktioner.

Nya instruktioner skapas genom att använda .directive funktion skapad.

För att anropa en ny instruktion måste du skapa en HTML-element med samma märknamn.

När du namnger instruktioner måste du använda huvudeckonomi-namngivning,w3TestDirectivemen när du anropar den måste du använda - för att separera namnet,w3-test-directive:

exempel

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

Prova själv

Du kan anropa instruktionen på följande sätt:

  • Elementnamn
  • Egenskap
  • Klass
  • Kommentar

Följande exempel kommer att generera samma resultat:

Elementnamn

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

Prova själv

Egenskap

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

Prova själv

Klass

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

Prova själv

Kommentar

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

Prova själv

Begränsa

kan du begränsa din instruktion så att den bara kan anropas genom vissa metoder.

exempel

genom att lägga till ett värde "A" av restrict egenskap, denna instruktion kan bara anropas genom egenskap:

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

Prova själv

Gyldiga restrict-värden är:

  • E betyder elementnamn
  • A betyder egenskap
  • C betyder klass
  • M betyder kommentar

Som standard är värdet EA，detta innebär att både elementnamn och attributnamn kan anropa instruktioner.