Ultimele tutoriale de dezvoltare web
 

AngularJS directivă

❮ Anterior Urmatorul capitol ❯

AngularJS vă permite să extindeți HTML cu noi atribute numite directive.

AngularJS are un set de directive built-in care oferă funcționalități pentru aplicații.

AngularJS, de asemenea, vă permite să definiți propriile directive.

Directivele AngularJS

AngularJS directive sunt extinse atribute HTML cu prefixul ng- .

ng-app directivă inițializează o cerere AngularJS.

ng-init Directiva privind inițializează datele aplicației.

ng-model directivă se leagă valoarea comenzilor HTML (input, select, textarea) de (input, select, textarea) la datele aplicației.

Citiți despre toate AngularJS directivele noastre din AngularJS directivă de referință .

Exemplu

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

<p>Name: <input type="text" ng-model="firstName"></p>
<p>You wrote: {{ firstName }}</p>

</div>
Încearcă - l singur »

ng-app directiva spune , de asemenea , că AngularJS <div> element este "owner" al aplicației AngularJS.

Datele de legare

{{ firstName }} expresie, în exemplul de mai sus, este un AngularJS date de expresie de legare.

obligatoriu în AngularJS de date se leagă AngularJS expresii cu date AngularJS.

{{ firstName }} este legat cu ng-model="firstName" .

În următorul exemplu, două câmpuri de text sunt legate împreună cu două directive ng-model de:

Exemplu

<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>
Încearcă - l singur »

Utilizarea ng-init nu este foarte frecvente. Vei învăța cum să inițializa datele din capitolul despre controlere.

Repetarea Elemente HTML

ng-repeat directivă repetă un element HTML:

Exemplu

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

ng-repeat Directiva clonează de fapt elemente HTML o dată pentru fiecare element dintr - o colecție.

ng-repeat directiva utilizată pe o serie de obiecte:

Exemplu

<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>
Încearcă - l singur »

AngularJS este perfect pentru CRUD bază de date (Create Read Update Delete) aplicații.
Imaginați-vă dacă aceste obiecte erau înregistrări dintr-o bază de date.

Directiva ng-app

ng-app Directiva definește elementul rădăcină al unei aplicații AngularJS.

ng-app directiva va auto-bootstrap (inițializa automat) atunci când aplicația este încărcată o pagină web.

Directiva-ng de inițializare

ng-init directivă definește valorile inițiale pentru o aplicație AngularJS.

În mod normal, nu veți utiliza ng-init. Vei folosi un controler sau modul în schimb.

Vei afla mai multe despre controlere și module de mai târziu.

Directiva ng model

ng-model directivă se leagă valoarea comenzilor HTML (input, select, textarea) de (input, select, textarea) la datele aplicației.

ng-model de directivă , de asemenea:

  • Furnizarea de validare de tip pentru datele aplicației (number, email, required) - (number, email, required) este (number, email, required) .
  • Furnizarea de stare pentru datele aplicației (invalid, dirty, touched, error) .
  • Furnizarea de clase CSS pentru elemente HTML.
  • elemente HTML Legați forme HTML.

Cititi mai multe despre ng-model de directivă în capitolul următor.

Creați Directive noi

În plus față de toate directivele AngularJS încorporate, puteți crea propriile directive.

Noile directive sunt create prin utilizarea .directive funcției.

Pentru a invoca noua directivă, face un element HTML cu același nume ca etichetă noua directivă.

Atunci când denumiți o directivă, trebuie să utilizați un nume de caz cămilă, w3TestDirective , dar când invocă, trebuie să utilizați - numele separate, w3-test-directive :

Exemplu

<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>
Încearcă - l singur »

Puteți invoca o directivă prin utilizarea:

  • nume element
  • Atribut
  • Clasă
  • cometariu

Exemplele de mai jos vor produce toate același rezultat:

nume element

<w3-test-directive></w3-test-directive>
Încearcă - l singur »

Atribut

<div w3-test-directive></div>
Încearcă - l singur »

Clasă

<div class="w3-test-directive"></div>
Încearcă - l singur »

cometariu

<!-- directive: w3-test-directive -->
Încearcă - l singur »

restricţii

Puteți restricționa directivele dvs. pentru a fi invocate numai de unele dintre metodele.

Exemplu

Prin adăugarea unei restrict de proprietate cu valoarea "A" , directiva poate fi invocată numai de atribute:

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

Cele juridice restricționează valori sunt:

  • E pentru numele Element
  • A pentru Atribut
  • C pentru clasa
  • M pentru Comentariu

În mod implicit valoarea este EA , ceea ce înseamnă că ambele nume de elemente și nume de atribute pot invoca directiva.


❮ Anterior Urmatorul capitol ❯