In diesem Artikel wird hauptsächlich die Verwendung des AngularJS-Controllers vorgestellt. AngularJS-Controller steuert die Daten der AngularJS-Anwendung. Werfen wir nun einen Blick auf diesen Artikel
Einführung in den AngularJS-Controller:
AngularJS-ControllerSteuerung Daten der AngularJS-Anwendung.
AngularJS-Controller sind reguläre JavaScript-Objekte.
AngularJS-Anwendungen werden von Controllern gesteuert. Die
ng-controller-Direktive definiert einen Anwendungscontroller.
Controller sind JavaScript-Objekte, die vom Standard-JavaScript-Objektkonstruktor erstellt werden.
<p ng-app="myApp" ng-controller="myCtrl">
名: <input type="text" ng-model="firstName"><br>
名: <input type="text" ng-model="lastName"><br>
<br>
姓名: {{firstName + " " + lastName}}
</p>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.firstName = "John";
$scope.lastName = "Doe";
});
</script>App-Auflösung:
AngularJS-Anwendungen werden durch ng-app definiert. Die Anwendung läuft innerhalb von
. Das Attribut
ng-controller="myCtrl" ist eine AngularJS-Direktive. wird verwendet, um einen Controller zu definieren. Die Funktion
myStrg ist eine JavaScript-Funktion .
AngularJS verwendet das Objekt $scope , um Controller aufzurufen.
In AngularJS ist $scope ein Anwendungsobjekt (das zu Anwendungsvariablen und -funktionen gehört).
Der $scope des Controllers (entspricht Scope, Kontrollbereich) wird zum Speichern von AngularJS-Modellobjekten verwendet. Der
-Controller erstellt zwei Eigenschaften im Bereich (firstName und lastName). Die
ng-model-Direktive bindet das Eingabefeld an die Eigenschaften des Controllers (Vorname und Nachname). (Wenn Sie mehr erfahren möchten, besuchen Sie die Spalte AngularJS Development Manual auf der chinesischen PHP-Website, um mehr zu erfahren)
Das obige Beispiel zeigt eine Methode mit lastName und firstName. Controller-Objekt mit zwei Eigenschaften.
Controller können auch Methoden (Variablen und Funktionen) haben:
<p ng-app="myApp" ng-controller="personCtrl">
名: <input type="text" ng-model="firstName"><br>
姓: <input type="text" ng-model="lastName"><br>
<br>
姓名: {{fullName()}}
</p>
<script>
var app = angular.module('myApp', []);
app.controller('personCtrl', function($scope) {
$scope.firstName = "John";
$scope.lastName = "Doe";
$scope.fullName = function() {
return $scope.firstName + " " + $scope.lastName;
}
});
</script>In großen Anwendungen ist es üblich, Controller in einer externen Datei zu speichern.
Kopieren Sie einfach den Code im
