Bagaimanakah Pengawal AngularJS Boleh Berkomunikasi Tanpa Bersarang?

Komunikasi antara Pengawal Sudut

Dalam AngularJS, memudahkan komunikasi antara pengawal selalunya diperlukan. Walau bagaimanapun, mengakses pembolehubah daripada satu pengawal dalam yang lain menimbulkan cabaran apabila pengawal tidak bersarang.

Melalui Pembolehubah tanpa Warisan

Melalui pengawal pertama (Ctrl1) sebagai hujah kepada pengawal kedua (Ctrl2) menggunakan $scope, Ctrl1 tidak berdaya maju kerana ralat yang tidak ditentukan. Begitu juga, mewarisi sifat daripada Ctrl1 kepada Ctrl2 menggunakan Ctrl2.prototype = new Ctrl1(); juga tidak berjaya.

Penyelesaian: Menggunakan Perkhidmatan

Untuk berkongsi pembolehubah merentas pengawal tanpa bersarang, penyelesaian yang berkesan ialah mencipta perkhidmatan dan menyuntiknya ke dalam semua pengawal yang berkaitan. Perkhidmatan ialah komponen Sudut yang boleh disuntik ke dalam berbilang pengawal atau arahan untuk berkongsi fungsi.

Contoh Perkhidmatan:

angular.module('myApp').service('sharedProperties', function() {
  var property = 'First';

  return {
    getProperty: function() {
      return property;
    },
    setProperty: function(value) {
      property = value;
    }
  };
});

Penggunaan dalam Pengawal:

function Ctrl1($scope, sharedProperties) {
  sharedProperties.setProperty('New First');
}

function Ctrl2($scope, sharedProperties) {
  $scope.prop2 = 'Second';
  $scope.both = sharedProperties.getProperty() + $scope.prop2;
}

Dengan menyuntik perkhidmatan sharedProperties ke dalam kedua-dua pengawal, data yang dikongsi boleh diakses dan diubah suai secara bebas.

Mengikat kepada Nilai Dikongsi

Selain mengakses nilai yang dikongsi, ia juga mungkin untuk mengikatnya dalam pengawal skop. Untuk mengekalkan rujukan terikat, adalah disyorkan untuk mengikat pada sifat objek dan bukannya jenis primitif.

var property = { Property1: 'First' };

// Binded to a static copy in Ctrl1
$scope.prop11 = property.Property1;

// Binded to the shared value in Ctrl2
$scope.prop12 = sharedProperties.getProperty().Property1;

Atas ialah kandungan terperinci Bagaimanakah Pengawal AngularJS Boleh Berkomunikasi Tanpa Bersarang?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!