Bagaimanakah Saya Boleh Berkongsi Data Secara Berkesan Antara Pengawal AngularJS?

Berkongsi Data antara Pengawal AngularJS

AngularJS ialah rangka kerja yang popular untuk membina aplikasi satu halaman. Selalunya, adalah perlu untuk berkongsi data antara pengawal. Contoh biasa ialah borang berbilang langkah di mana data yang dimasukkan dalam satu langkah kemudian digunakan di berbilang lokasi.

Masalahnya

Pertimbangkan kod berikut:

<div ng-controller="FirstCtrl">
    <input type="text" ng-model="FirstName">
    <br>Input is : <strong>{{FirstName}}</strong>
</div>

<hr>

<div ng-controller="SecondCtrl">
    Input should also be here: {{FirstName}}
</div>

var myApp = angular.module('myApp', []);

myApp.factory('Data', function(){
    var FirstName = '';
    return FirstName;
});

myApp.controller('FirstCtrl', function( $scope, Data ){

});

myApp.controller('SecondCtrl', function( $scope, Data ){
    $scope.FirstName = Data.FirstName;
});

Dalam kod ini, data yang dimasukkan dalam medan input dalam pengawal FirstCtrl tidak dikemas kini secara automatik dalam SecondCtrl pengawal. Ini kerana kilang Data mengembalikan nilai primitif (FirstName ialah rentetan), bukan rujukan objek.

Penyelesaian

Penyelesaian yang mudah ialah memiliki kilang kembalikan objek dan biarkan pengawal berfungsi dengan rujukan kepada objek yang sama:

myApp.factory('Fact', function(){
  return { Field: '' };
});

myApp.controller('FirstCtrl', function( $scope, Fact ){
  $scope.Alpha = Fact;
});

myApp.controller('SecondCtrl', function( $scope, Fact ){
  $scope.Beta = Fact;
});

<div ng-controller="FirstCtrl">
    <input type="text" ng-model="Alpha.Field">
    First {{Alpha.Field}}
</div>

<div ng-controller="SecondCtrl">
    <input type="text" ng-model="Beta.Field">
    Second {{Beta.Field}}
</div>

Dengan pendekatan ini, kedua-duanya pengawal berkongsi rujukan kepada objek yang sama dan perubahan yang dibuat pada objek dalam satu pengawal secara automatik dicerminkan dalam pengawal yang lain.

Pilihan Terperinci

Untuk senario yang lebih kompleks , anda boleh menggunakan getter dan setter untuk mengawal akses kepada data yang dikongsi. Pendekatan ini memberi anda lebih kawalan ke atas cara data dikemas kini dan boleh membantu menghalang意外的更改。

Kesimpulan

Berkongsi data antara pengawal AngularJS ialah tugas biasa. Dengan memahami pelbagai teknik yang tersedia, anda boleh memilih pendekatan yang paling sesuai dengan keperluan aplikasi khusus anda.

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