Bagaimana untuk Berkongsi Data $skop Antara Negeri dalam AngularJS UI-Router?

Melalui $scope Data Merentas Negeri dalam AngularJS UI-Router

Dalam AngularJS UI-Router, menavigasi antara keadaan anak tidak mewarisi data $scope daripada induk secara automatik pengawal. Ini boleh menimbulkan cabaran apabila perlu berkongsi data antara negeri.

Warisan Paparan Bersarang

Kunci untuk berkongsi data $skop antara negeri terletak pada menggunakan mekanisme pewarisan yang disediakan oleh hierarki paparan UI-Router. Apabila paparan anak bersarang dalam paparan induk, skop anak mewarisi sifat daripada skop induk.

Memahami Warisan Skop AngularJS

Skop AngularJS mewarisi secara prototaip, bermakna skop anak mewarisi sifat dan kaedah daripadanya skop ibu bapa. Menggunakan '.' dalam nama harta dalam arahan model ng memastikan bahawa sifat diwarisi.

Pelaksanaan

Untuk berkongsi data $skop antara negeri, ikut langkah berikut:

1. Tentukan jenis rujukan (cth., objek) dalam $scope, seperti $scope.Model.
2. Dalam keadaan induk, mulakan objek Model (cth., $scope.Model = $scope.Model || { Nama: "xxx"}).
3. Dalam keadaan anak, akses objek Model menggunakan ng-model="Model.PropertyName" (cth., ).

Contoh

// State Configuration
$stateProvider
  .state("main", {
    url: "/main",
    templateUrl: "main_init.html",
    controller: 'mainController'
  })
  .state("main.1", {
    parent: 'main',
    url: "/1",
    templateUrl: 'form_1.html',
    controller: 'mainController'
  })
  .state("main.2", {
    parent: 'main',
    url: "/2",
    templateUrl: 'form_2.html',
    controller: 'mainController'
  });

// Controller
controller('mainController', function ($scope) {
  $scope.Model = $scope.Model || {Name : "xxx"};
});

Dengan mengikuti langkah-langkah ini, anda boleh berkongsi data $skop dengan lancar antara keadaan dalam UI-Router, memastikan akses data yang konsisten merentas permohonan anda.

Atas ialah kandungan terperinci Bagaimana untuk Berkongsi Data $skop Antara Negeri dalam AngularJS UI-Router?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!