AngularJS Direktiver

AngularJS giver dig mulighed for at bruge en kaldetinstruktionerny egenskab til at udvide HTML.

AngularJS har en række indbyggede instruktioner, der kan give din applikation funktioner.

AngularJS tillader også, at du definerer dine egne anvisninger.

AngularJS Direktiver

AngularJS-anvisninger er udvidede HTML-attributter med præfikset ng-.

ng-app Anvisningen initialiserer AngularJS-applikationen.

ng-init Anvisningen initialiserer applikationsdata.

ng-model Instruktioner binder HTML-kontrol (input, select, textarea) værdi til applikationens data.

Læs mere om alle AngularJS-anvisninger i vores AngularJS-anvisningsreference.

eksempel

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

Prøv det selv

ng-app anvisningen fortæller også AngularJS, at <div>-elementet er 'ejer' af AngularJS-applications.

data-binding

i det foregående eksempel {{ firstName }} Et udtryk er et AngularJS data-binding-udtryk.

AngularJS' data-binding binder AngularJS-udtryk til AngularJS-data.

{{ firstName }} med ng-model="firstName" sammen.

I det næste eksempel bindes to tekstfelter sammen gennem to ng-model-anvisninger:

eksempel

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

Prøv det selv

Brug af ng-init er ikke særligt almindelig. Du vil lære, hvordan du initialiserer data i kapitlet om kontrollerne.

gentagelse af HTML-elementer

ng-repeat Anvisning til gentagelse af HTML-elementer:

eksempel

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

Prøv det selv

ng-repeat anvisningen kloner faktisk hvert element i samlingenkloner én HTML-element.

bruges til objektarrays ng-repeat Anvisning:

eksempel

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

Prøv det selv

AngularJS er meget egnet til database CRUD (oprette, læse, opdatere, slette) applikationer.

Forestil dig, hvis disse objekter er fra database poster.

ng-app-instruktion

ng-app Instruktioner definerer AngularJS-applikationensrod element.

når websiden indlæses,ng-app Instruktionen vilAutomatisk opstart(automatisk initialisering) applikation.

ng-init-instruktion

ng-init Instruktioner definerer AngularJS-applikationensStartværdi.

Normalt bruger du ikke ng-init. Du vil bruge kontroleren eller modulet i stedet.

Du vil senere få mere information om kontrolere og moduler.

ng-model-instruktion

ng-model Instruktioner binder HTML-kontrol (input, select, textarea) værdi til applikationens data.

ng-model Instruktioner kan også:

  • Giv applikationens data typevalidering (nummer, e-mail, påkrævet)
  • Giv applikationens data tilstand (ugyldig, rå, berørt, fejl)
  • Giv HTML-element en CSS-klasse
  • Bind HTML-element til HTML-formular

Læs mere om ng-model Instruktionens information.

Opret en ny instruktion

Ud over alle indbyggede AngularJS-instruktioner kan du også oprette dine egne instruktioner.

En ny instruktion oprettes ved at bruge .directive oprettet af funktionen.

For at kalde en ny instruktion, skal du oprette en HTML-element med samme mærke som den nye instruktion.

Når du navngiver en instruktion, skal du bruge hestekuffen-navnning,w3TestDirectivemen når du kalder det, skal du bruge - adskilt navn,w3-test-directive:

eksempel

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

Prøv det selv

Du kan kalde instruktionen på følgende måde:

  • Elementnavn
  • Egenskab
  • Klasse
  • Kommentar

Følgende eksempler vil alle generere samme resultat:

Elementnavn

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

Prøv det selv

Egenskab

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

Prøv det selv

Klasse

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

Prøv det selv

Kommentar

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

Prøv det selv

begræns

kan du begrænse din instruktion til kun at kunne kaldes gennem visse metoder.

eksempel

ved at tilføje en værdi "A" af restrict egenskab, denne instruktion kan kun kaldes gennem egenskaber:

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

Prøv det selv

lovlige værdier for restrict er:

  • E repræsenterer elementnavne
  • A repræsenterer egenskaber
  • C repræsenterer klasser
  • M repræsenterer kommentarer

Standardværdien er EAdette betyder, at både elementnavne og attributnavne kan kalde instruktioner.