Detaillierte Erläuterung der AngularJS-Syntax (Fortsetzung)_AngularJS

src- und href-Attribute

In AngularJS sollte src als ng-src und href als ng-href geschrieben werden. Zum Beispiel:

Code kopieren Der Code lautet wie folgt:

Einige Texte

Ausdruck

Sie können in Vorlagen einfache mathematische Operationen, Vergleichsoperationen, bitweise Operationen, Referenzarrays, Objektnotationen usw. ausführen. Ausdrücke verwenden jedoch einen benutzerdefinierten Interpreter von Angular), anstatt die eval()-Funktion von Javascript zu verwenden, daher gibt es größere Einschränkungen.
Obwohl Ausdrücke hier in vielerlei Hinsicht strenger sind als Javascript, sind sie toleranter gegenüber undefiniert und null. Wenn ein Fehler auftritt, zeigt die Vorlage einfach nichts an, anstatt einen NullPointerException-Fehler auszulösen. Zum Beispiel:

Code kopieren Der Code lautet wie folgt:

{{computer() /10 }}

//Obwohl es legal ist, fügt es die Geschäftslogik in die Vorlage ein.

Trennen Sie die Verantwortlichkeiten von UI und Controller

Controller sind an bestimmte DOM-Fragmente gebunden, und diese Fragmente sind der Inhalt, den sie verwalten müssen. Es gibt zwei Möglichkeiten, einen Controller einem DOM-Knoten zuzuordnen. Eine besteht darin, ihn über ng-controller in der Vorlage zu deklarieren. Die zweite besteht darin, ihn über Routing an ein dynamisch geladenes DOM-Vorlagenfragment zu binden. Wir können verschachtelte Controller erstellen. Sie können Datenmodelle und Funktionen über Vererbungsstrukturen teilen. Die eigentliche Verschachtelung erfolgt auf dem $scope-Objekt. Durch den internen primitiven Vererbungsmechanismus wird der $scope des übergeordneten Controllerobjekts an das innere verschachtelte $ übergeben Geltungsbereich (alle Eigenschaften, einschließlich Funktionen). Zum Beispiel:

Code kopieren Der Code lautet wie folgt:

...

Verwenden Sie $scope, um Modelldaten verfügbar zu machen

Sie können $scope-Eigenschaften explizit erstellen, zum Beispiel $scope.count = 5. Sie können Datenmodelle auch indirekt über die Vorlage selbst erstellen.

Nach Ausdruck. Zum Beispiel

Code kopieren Der Code lautet wie folgt:

Zählung auf drei einstellen

NG-Model für Formularelemente verwenden

Ähnlich wie Ausdrücke funktionieren die auf ng-model angegebenen Modellparameter auch im äußeren Controller. Der einzige Unterschied besteht darin, dass dadurch eine bidirektionale Bindung zwischen dem Formularelement und dem angegebenen Modell erstellt wird.

Verwenden Sie Watch, um Änderungen im Datenmodell zu überwachen

Die Funktionssignatur von $watch lautet: $watch(watchFn,watchAction,deepWatch)
watchFn ist eine Zeichenfolge mit einem Angular-Ausdruck oder einer Angular-Funktion, die den aktuellen Wert des überwachten Datenmodells zurückgibt. watchAction ist eine Funktion oder ein Ausdruck, die aufgerufen wird, wenn sich watchFn ändert. Seine Funktionssignatur lautet:
function(newValue,oldValue,scope) deepWatch Wenn dieser optionale boolesche Parameter auf true gesetzt ist, weist er Angular an, zu prüfen, ob sich jede Eigenschaft des überwachten Objekts geändert hat. Sie können diesen Parameter verwenden, wenn Sie Elemente in einem Array oder alle Eigenschaften eines Objekts überwachen möchten, anstatt einen einzelnen Wert zu überwachen. Beachten Sie, dass Angular Arrays oder Objekte durchlaufen muss. Wenn die Sammlung groß ist, ist der Vorgang kompliziert und umfangreich.

Die $watch-Funktion gibt eine Funktion zurück. Wenn Sie keine Änderungsbenachrichtigungen benötigen, können Sie diese zurückgegebene Funktion verwenden, um sich vom Monitor abzumelden.
Wenn wir eine Eigenschaft überwachen und uns dann von der Überwachung abmelden müssen, können wir den folgenden Code verwenden: var dereg = $scope.$watch('someModel.someProperty',callbackOnChange());
... dereg();

Der Beispielcode lautet wie folgt:

Code kopieren Der Code lautet wie folgt:

   
   


   

       

            {{item.title}}
           
            {{item.price | Währung}}
            {{item.price * item.quantity | Währung}}
       

       

Gesamt: {{totalCart()| Währung }}

       

Rabatt: {{bill.discount | Währung}}

       

Zwischensumme: {{subtotal() | Währung}}