Penjelasan terperinci tentang penggunaan AngularJS controller_AngularJS

Peranan pengawal dalam Angularjs adalah untuk meningkatkan paparan Ia sebenarnya adalah fungsi yang digunakan untuk menambah kefungsian tambahan pada skop dalam paparan Kami menggunakannya untuk menetapkan keadaan awal objek skop dan menambah gelagat tersuai. .

Apabila kami mencipta pengawal pada halaman, Angularjs akan menjana dan menghantar $scope kepada pengawal Memandangkan Angularjs akan membuat instantiate pengawal secara automatik, kami hanya perlu menulis pembina. Contoh berikut menunjukkan permulaan pengawal:

function my Controller($scope){
 $scope.msg="hello,world!"; 
}

Kaedah di atas untuk mencipta pengawal akan mencemarkan ruang nama global Pendekatan yang lebih munasabah ialah mencipta modul dan kemudian mencipta pengawal dalam modul, seperti berikut:

var myApp=angular.module("myApp",[]);
myApp.controller("myController",function($scope){
 $scope.msg="hello,world!";
})

Gunakan perintah terbina dalam ng-klik untuk mengikat butang, pautan dan elemen DOM lain untuk mengklik acara. Arahan ng-click mengikat acara mouseup dalam penyemak imbas kepada pengendali acara yang ditetapkan pada elemen DOM (contohnya, apabila penyemak imbas mencetuskan acara klik pada elemen DOM, fungsi akan dipanggil). Sama seperti contoh sebelumnya, pengikatan kelihatan seperti ini:

<div ng-controller="FirstController">
<h4>The simplest adding machine ever</h4>
<button ng-click="add(1)" class="button">Add</button>
<a ng-click="subtract(1)" class="button alert">Subtract</a>
<h4>Current count: {{ counter }}</h4>
</div>

Butang dan pautan terikat pada operasi dalam $scope dalaman AngularJS akan memanggil kaedah yang sepadan apabila mana-mana elemen diklik. Ambil perhatian bahawa apabila menetapkan fungsi yang hendak dipanggil, parameter (tambah(1)) juga akan dihantar dalam kurungan

app.controller('FirstController', function($scope) {
$scope.counter = 0;
$scope.add = function(amount) { $scope.counter += amount; };
$scope.subtract = function(amount) { $scope.counter -= amount; };
});

Perbezaan terbesar antara Angularjs dan rangka kerja lain ialah pengawal tidak sesuai untuk melaksanakan operasi DOM, pemformatan atau operasi data dan keadaan operasi penyelenggaraan selain daripada menyimpan model data Ia hanyalah jambatan antara paparan dan $scope .

Sarang pengawal (skop mengandungi skop)

Mana-mana bahagian aplikasi AngularJS, tidak kira dalam konteks mana ia dipaparkan, mempunyai skop induk. Untuk tahap di mana ng-app berada, skop induknya ialah $rootScope.

Secara lalai, apabila AngularJS tidak dapat mencari harta dalam skop semasa, ia akan mencarinya dalam skop induk. Jika AngularJS tidak dapat mencari atribut yang sepadan, ia akan mencari ke atas sepanjang skop induk sehingga ia mencapai $rootScope. Jika ia tidak ditemui dalam $rootScope, program akan terus berjalan, tetapi paparan tidak akan dikemas kini.

Mari kita lihat tingkah laku ini melalui contoh. Buat ParentController, yang mengandungi objek pengguna, dan kemudian buat ChildController untuk merujuk objek ini:

app.controller('ParentController', function($scope) {
$scope.person = {greeted: false};
});
app.controller('ChildController', function($scope) {
$scope.sayHello = function() {
$scope.person.name = 'Ari Lerner';
};
});

Jika kita meletakkan ChildController di dalam ParentController, skop induk objek $scope ChildController ialah objek $scope ParentController. Mengikut mekanisme pewarisan prototaip, kita boleh mengakses objek $scope ParentController dalam skop kanak-kanak.

<div ng-controller="ParentController">
<div ng-controller="ChildController">
<a ng-click="sayHello()">Say hello</a>
</div>
{{ person }}
</div>

Di atas adalah keseluruhan kandungan artikel ini, saya harap ia akan membantu kajian anda dan membantu anda membiasakan diri dengan pengawal AngularJS.