Beispiel für die Verwendung der NG-BIND-Direktive zur Implementierung einer unidirektionalen Bindung in ANGULARJS
- 高洛峰Original
- 2016-12-24 09:54:271234Durchsuche
Nach einer kurzen Einführung in das AngularJS-Framework zeigt dieser Artikel anhand eines Beispiels die Verwendung der Interpolationsmethode {{}} und der NG-Bind-Direktive.
Im Gegensatz zu Jquery, bei dem es sich lediglich um eine Klassenbibliothek handelt, die die Front-End-Entwicklung stärkt und vereinfacht, handelt es sich bei AngularJS um ein vollständiges Web-Front-End-Framework, sodass die Lernkurve viel höher ist.
angularjs fühlt sich für mich ähnlich an wie das Spring-Framework von Java. Es befindet sich in der zentralen Containerposition und kann viele seiner integrierten Komponenten erfüllen. In speziellen Szenarien können wir es entsprechend erweitern die Rahmenideen.
Beginnen wir mit dem grundlegendsten Inhalt:
<!DOCTYPE html>
<html ng-app>
<head>
<meta charset="utf-8">
<title>ng-bind directive</title>
</head>
<body ng-controller="HelloController">
<div>
<p>直接输出字符串字面值</p>
Hello {{"World"}}
<hr>
</div>
<div>
<p>使用占位符输出变量</p>
Hello {{greeting}}
<hr>
</div>
<div>
<p>使用ng-bind指令输出变量</p>
Hello <span ng-bind="greeting"></span>
<hr>
</div>
<script src="../lib/angularjs/1.2.26/angular.min.js"></script>
<script>
function HelloController($scope) {
$scope.greeting = "World";
}
</script>
</body>
</html>ng-app deklariert ein AngularJS-Modul und ist auf den Umfang der Deklaration von HTML-Tags beschränkt.
ng-controller deklariert einen AngularJS-Controller im Modul. Es können mehrere Controller vorhanden sein, der Kontext ist jedoch isoliert und der Umfang des Controllers sollte so weit wie möglich eingeschränkt werden.
{{}} ist die Interpolationssyntax von AngularJS, ähnlich dem EL-Ausdruck ${} von JSP. Die erste Ausgabe erfolgt, weil „World“ ein Literalwert ist und das Programm ihn direkt ausgibt. Die zweite Ausgabe erfolgt, weil die Begrüßung eine im Controller definierte Variable ist, sodass auch der der Variablen entsprechende Wert ausgegeben wird World; die dritte Ausgabe Die integrierte ng-bind-Attributdirektive von anglejs wird verwendet. Das Endergebnis ist äquivalent zu {{}}, aber beachten Sie, dass auf die Direktive = eine Zeichenfolge folgt, also machen Sie keinen Fehler.
Der HelloController in js entspricht den Anweisungen im Körper. Der Eingabeparameter $scope ist ein vom Framework bereitgestellter Dienst, der den Kontext des aktuellen Controllers darstellt Injizieren. Mehr dazu erfahren Sie später. Der Methodenkörper besteht nur aus einer Zeile und definiert eine Variable auf $scope, bei der es sich um die Variable handelt, auf die im HTML-Code verwiesen wird.
Dieser Artikel ist sehr einfach, kopieren Sie einfach den Code und er wird ausgeführt. Beachten Sie, dass es sich bei angle.min.js um die neueste Version des 1.2-Zweigs handelt. Derselbe Code kann nicht mit Version 1.3.0 ausgeführt werden. Der Grund dafür ist möglicherweise nicht bekannt.
Weitere Beispiele für die unidirektionale Bindung mithilfe der NG-BIND-Anweisung in ANGULARJS finden Sie auf der chinesischen PHP-Website für verwandte Artikel!