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

Berkongsi $scope Data Antara Negeri dalam AngularJS UI-Router

Dalam aplikasi AngularJS yang menggunakan UI-Router untuk pengurusan keadaan, mungkin terdapat perlu berkongsi data $skop antara keadaan ibu bapa dan anak. Tanpa menggunakan perkhidmatan atau pemerhati yang berbelit-belit, bagaimanakah kita boleh mencapainya?

Menggunakan Pewarisan Hierarki Paparan

Penghala UI AngularJS menyediakan warisan sifat skop hanya apabila paparan anak bersarang dalam paparan induk. Ini bermakna bahawa templat keadaan anak mesti bersarang dalam templat paparan induk.

Sebagai contoh, pertimbangkan takrif keadaan berikut:

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

Dalam senario ini, pandangan daripada keadaan anak ("form_1.html" dan "form_2.html") bersarang dalam paparan keadaan induk ("main_init.html"). Ini membolehkan pewarisan sifat $scope daripada keadaan induk kepada keadaan anak.

Menggunakan Jenis Rujukan dan Notasi Titik

Untuk memastikan data dikongsi, ia adalah penting untuk menentukan jenis rujukan dalam $scope pengawal induk menggunakan notasi titik. Contohnya:

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

Dengan menggunakan tatatanda titik, kami memastikan bahawa $scope.Model ialah jenis rujukan. Apabila diakses dalam keadaan kanak-kanak, ia akan menjadi contoh $scope.Model yang sama yang dibuat dalam keadaan induk, memudahkan perkongsian data.

Contoh

Dalam contoh dengan syarat dalam soalan, pengawal utama dan keadaan anak disediakan dengan betul untuk warisan skop. Isunya terletak pada penggunaan notasi titik yang tidak betul. Dengan mengubah suai model ng dalam keadaan anak untuk merujuk $scope.Model.Name, perkongsian data akan diwujudkan.

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