Bagaimanakah Saya Boleh Mengirim Data dengan Cekap Antara Pengawal AngularJS?

Melalui Data Antara Pengawal dalam AngularJS

Menyalurkan data antara pengawal dalam AngularJS ialah tugas biasa dan terdapat beberapa cara berbeza untuk dilakukan ia. Dalam artikel ini, kami akan membincangkan menggunakan perkhidmatan untuk menghantar data daripada ProductController kepada CartController.

Pelaksanaan Perkhidmatan

Untuk bermula, kami akan mentakrifkan perkhidmatan dipanggil productService yang akan menguruskan senarai produk kami. Perkhidmatan ini akan mengandungi dua fungsi: addProduct dan getProducts. addProduct akan menambah produk baharu pada senarai dan getProducts akan mengembalikan keseluruhan senarai.

app.factory('productService', function() {
  var productList = [];

  var addProduct = function(newObj) {
      productList.push(newObj);
  };

  var getProducts = function(){
      return productList;
  };

  return {
    addProduct: addProduct,
    getProducts: getProducts
  };

});

Pelaksanaan Pengawal

Seterusnya, kami akan menyuntik productService ke dalam kedua-dua ProductController dan CartController kami.

Dalam ProductController, kami akan mentakrifkan fungsi dipanggil callToAddToProductList yang akan menambah produk yang dipilih pada senarai yang diuruskan oleh productService.

app.controller('ProductController', function($scope, productService) {
    $scope.callToAddToProductList = function(currObj){
        productService.addProduct(currObj);
    };
});

Dalam CartController, kami akan menggunakan fungsi getProducts untuk mendapatkan semula senarai produk daripada productService dan menetapkannya kepada $scope.products variable.

app.controller('CartController', function($scope, productService) {
    $scope.products = productService.getProducts();
});

DOM Kemas kini

Memandangkan senarai produk anda dalam CartController dikodkan keras, anda perlu mengemas kini DOM secara manual apabila produk baharu ditambahkan. Satu cara untuk melakukan ini ialah menggunakan fungsi $watch untuk melihat perubahan pada $scope.products pembolehubah dan mengemas kini DOM dengan sewajarnya.

app.controller('CartController', function($scope, productService) {
    $scope.products = productService.getProducts();

    $scope.$watch('products', function(newValue, oldValue) {
        // Update the DOM here based on the new value of products
    }, true);
});

Dengan menggunakan perkhidmatan untuk mengurus senarai produk dan berkomunikasi antara kedua-dua pengawal, anda boleh menghantar data dengan mudah antara mereka dan mengemas kini DOM dengan sewajarnya.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Mengirim Data dengan Cekap Antara Pengawal AngularJS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!