Angularjs, melewatkan cakupan antar rute

Saya memiliki situasi dengan formulir yang membentang di beberapa halaman (mungkin tidak ideal, tetapi begitulah adanya). Saya ingin memiliki satu ruang lingkup untuk seluruh formulir yang terisi saat Anda melakukannya, sehingga jika pengguna bolak-balik di antara langkah-langkah tersebut, mudah untuk mengingat statusnya.

Jadi yang perlu saya lakukan, dengan sangat-pseudo-code:

1. Set $scope.val = <Some dynamic data>
2. Klik link dan diarahkan ke template baru (mungkin dengan pengontrol yang sama).
3. $scope.val harus tetap memiliki nilai yang sama seperti di halaman terakhir.

Apakah data yang disimpan untuk cakupan adalah cara yang tepat untuk melakukan hal ini, atau adakah cara lain? Bisakah Anda bahkan membuat pengontrol yang memiliki cakupan tetap di antara rute, kecuali untuk menyimpannya dalam database tentunya.

Anda perlu menggunakan layanan karena layanan akan bertahan sepanjang hidup aplikasi Anda.

Katakanlah Anda ingin menyimpan data yang berkaitan dengan pengguna

Ini adalah cara Anda mendefinisikan layanan:

app.factory("user",function(){
        return {};
});

Di pengontrol pertama Anda:

app.controller( "RegistrationPage1Controller",function($scope,user){
    $scope.user = user;
    // and then set values on the object
    $scope.user.firstname = "John";
    $scope.user.secondname = "Smith";
});

app.controller( "RegistrationSecondPageController",function($scope,user){
        $scope.user = user;
        // and then set values on the object
        $scope.user.address = "1, Mars";

    });

Layanan akan berfungsi, tetapi cara logis untuk melakukannya hanya dengan menggunakan cakupan dan pengontrol biasa adalah dengan menyiapkan pengontrol dan elemen Anda sehingga mencerminkan struktur model Anda. Secara khusus, Anda memerlukan elemen induk dan pengontrol yang menetapkan lingkup induk. Halaman individu dari formulir harus berada dalam tampilan yang merupakan turunan dari induknya. Cakupan induk tetap ada bahkan saat tampilan anak diperbarui.

Saya berasumsi Anda menggunakan ui-router sehingga Anda dapat memiliki tampilan bernama bersarang. Kemudian di pseudo-code:

<div ng-controller="WizardController">
  <div name="stepView" ui-view/>
</div>

Kemudian WizardController menentukan variabel cakupan yang ingin Anda pertahankan di seluruh langkah formulir multi-halaman (yang saya sebut sebagai "wizard"). Kemudian rute Anda stepViewhanya akan diperbarui . Setiap langkah dapat memiliki template, pengontrol, dan cakupannya sendiri, tetapi cakupannya hilang dari halaman ke halaman. Tapi cakupan di WizardController dipertahankan di semua halaman.

Untuk mengupdate cakupan WizardController dari pengontrol anak, Anda harus menggunakan sintaks seperti $scope.$parent.myProp = 'value'atau menentukan fungsi setMyPropdi WizardController untuk setiap variabel cakupan. Jika tidak, jika Anda mencoba menyetel variabel lingkup induk langsung dari pengontrol anak, Anda akan berakhir hanya membuat variabel lingkup baru pada anak itu sendiri, membayangi variabel induk.

Agak sulit untuk dijelaskan dan saya mohon maaf atas kurangnya contoh lengkap. Pada dasarnya Anda menginginkan pengontrol induk yang menetapkan lingkup induk, yang akan dipertahankan di semua halaman formulir Anda.

Data dapat dikirimkan antar pengontrol melalui dua cara

1. $rootScope
2. Model

Contoh di bawah ini menunjukkan penerusan nilai menggunakan model

app.js

angular.module('testApp')
  .controller('Controller', Controller)
  .controller('ControllerTwo', ControllerTwo)
  .factory('SharedService', SharedService);

SharedService.js

function SharedService($rootScope){

 return{
    objA: "value1",
    objB: "value2"
  }
}

// Ubah nilai dalam pengontrol A

Controller.js

function Controller($scope, SharedService){

 $scope.SharedService = SharedService;

 $scope.SharedService.objA = "value1 modified";
}

// Akses nilai di controllertwo

ControllerTwo.js

function ControllerTwo($scope, SharedService){

 $scope.SharedService = SharedService;

 console.log("$scope.SharedService.objA"+$scope.SharedService.objA); // Prints "value1 modified"
}

Semoga ini membantu.