Pengawal pengawal AngularJS kaedah komunikasi yang betul_AngularJS

AngularJS ialah rangka kerja MVC bahagian hadapan yang sangat berkuasa Pengawal dalam AngularJS ialah fungsi yang digunakan untuk menambah fungsi tambahan pada skop pandangan ($skop). objek dan Tambah tingkah laku tersuai.

Apabila kami mencipta pengawal baharu, angularJS akan membantu kami menjana dan menghantar objek $scope baharu kepada pengawal ini Dalam mana-mana bahagian aplikasi angularJS, terdapat skop induk, peringkat atas Ia adalah tahap di mana ng-. apl terletak, dan skop induknya ialah $rootScope.

$akar setiap $skop menghala ke $rootScope, dan $cope.$ibu bapa menunjuk ke skop induk.

Komunikasi antara penyaman pada asasnya ialah bagaimana $scope di mana pengawal semasa berada berkomunikasi dengan $scopes pada pengawal lain.

Biasanya terdapat 3 penyelesaian:

Menggunakan prinsip pewarisan skop, pengawal anak mengakses kandungan dalam pengawal induk. Gunakan acara dalam angularJS, iaitu, gunakan $on, $emit, $broadcast untuk penghantaran mesej Gunakan perkhidmatan dalam angularJS
Cara pertama

Iaitu, skop bersarang dalam skop. Terdapat sekatan penggunaan dan skop tertentu yang perlu disarang.

Secara lalai dalam angularJS, apabila harta tidak ditemui dalam skop semasa, ia akan dicari dalam skop induk Jika ia tidak ditemui, ia akan dicari sehingga $rootScope ditemui. Jika ia tidak ditemui dalam $rootScope, program akan tetap berjalan, tetapi paparan tidak akan dikemas kini.

Contoh

javascript

//Javascript
app.controller('ParentController', function($scope) { 
$scope.person = {greeted: false};
});
app.controller('ChildController', function($scope) {
$scope.sayHello = function() {
$scope.person.name = 'Ari Lerner';
};
});
//HTML
<div ng-controller="ParentController">
<div ng-controller="ChildController">
<a ng-click="sayHello()">Say hello</a>
</div>
{{ person }}
</div>
//result
{"greeted":true, "name": "Ari Lerner"}

Cara kedua

Oleh kerana skop adalah hierarki, rantai skop boleh digunakan untuk lulus acara.

Terdapat dua cara untuk menyampaikan acara: * $broadcast: Acara yang dicetuskan mesti disebarkan ke bawah untuk memberitahu seluruh sistem acara (membenarkan sebarang skop mengendalikan acara ini). * $emit: Jika anda ingin mengingatkan modul global, anda perlu meneruskan acara ke atas apabila anda perlu memberitahu skop peringkat lebih tinggi (seperti $rootscope).

Gunakan $on pada skop untuk pemantauan acara.

Contoh

JavaScript

app.controller('ParentController', function($scope) { 
$scope.$on('$fromSubControllerClick', function(e,data){
console.log(data); // hello
});
});
app.controller('ChildController', function($scope) {
$scope.sayHello = function() {
$scope.$emit('$fromSubControllerClick','hello');
};
});
//HTML
<div ng-controller="ParentController">
<div ng-controller="ChildController">
<a ng-click="sayHello()">Say hello</a>
</div>
</div>

Isu lain yang ingin saya bincangkan di sini ialah isu prestasi penyebaran acara Jika $broadcast $on digunakan untuk memberitahu semua subskop, akan ada isu prestasi di sini, jadi disyorkan untuk menggunakan $emit $on. . Untuk meningkatkan lagi prestasi, fungsi pengendalian peristiwa yang ditentukan mesti dikeluarkan bersama apabila skop dimusnahkan.

Menggunakan $emit $on memerlukan kami mengikat pendengar acara kepada $rootScope, sebagai contoh:

JavaScript

angular
.module('MyApp')
.controller('MyController', ['$scope', '$rootScope', function MyController($scope, $rootScope) {
var unbind = $rootScope.$on('someComponent.someCrazyEvent', function(){
console.log('foo');
});
$scope.$on('$destroy', unbind);
}
]);

Tetapi kaedah ini agak menyusahkan, dan ia membuatkan saya tidak selesa apabila menentukan pelbagai fungsi pengendalian acara, jadi mari kita perbaikinya

Gunakan penghias untuk menentukan fungsi mengikat acara baharu:

JavaScript

angular
.module('MyApp')
.config(['$provide', function($provide){
$provide.decorator('$rootScope', ['$delegate', function($delegate){
Object.defineProperty($delegate.constructor.prototype, '$onRootScope', {
value: function(name, listener){
var unsubscribe = $delegate.$on(name, listener);
this.$on('$destroy', unsubscribe);
return unsubscribe;
},
enumerable: false
});
return $delegate;
}]);
}]);

Kemudian apabila kita mentakrifkan fungsi pengendali acara dalam pengawal:

JavaScript

angular
.module('MyApp')
.controller('MyController', ['$scope', function MyController($scope) {
$scope.$onRootScope('someComponent.someCrazyEvent', function(){
console.log('foo');
});
}
]); 

Saya sangat mengesyorkan pendekatan ini

Cara ketiga

Menggunakan ciri-ciri mod tunggal perkhidmatan dalam angularJS, perkhidmatan (perkhidmatan) menyediakan cara untuk mengekalkan data sepanjang keseluruhan kitaran hayat aplikasi, berkomunikasi antara pengawal dan memastikan ketekalan data .

Secara amnya, kami merangkum pelayan untuk menyediakan antara muka untuk aplikasi mengakses data atau berinteraksi dengan data dari jauh.

Contoh

JavaScript

var myApp = angular.module("myApp", []);
myApp.factory('Data', function() {
return {
name: "Ting"
}
});
myApp.controller('FirstCtrl', function($scope, Data) {
$scope.data = Data;
$scope.setName = function() {
Data.name = "Jack";
}
});
myApp.controller('SecondCtrl', function($scope, Data) {
$scope.data = Data;
$scope.setName = function() {
Data.name = "Moby";
}
});

Di atas adalah kaedah komunikasi yang betul untuk pengawal AngularJS saya harap ia dapat membantu semua orang.