Angularjs, rotalar arasında kapsam geçme

Birkaç sayfaya yayılan bir formla ilgili bir durumum var (ideal olmayabilir, ama bu böyle). Siz ilerledikçe doldurulan formun tamamı için tek bir kapsam olmasını istiyorum, böylece kullanıcı adımlar arasında gidip gelirse durumu hatırlaması kolay olur.

Bu yüzden çok sözde kodla yapmam gerekiyor:

1. Ayarlamak $scope.val = <Some dynamic data>
2. Bir bağlantıya tıklayın ve yeni bir şablona yönlendirilin (muhtemelen aynı denetleyiciyle).
3. $scope.val yine de son sayfadakiyle aynı değerde olmalıdır.

Kapsam için bir şekilde ısrarcı veriler bunun için doğru yol mu yoksa başka bir yol var mı? Elbette bir veritabanına kaydetme dışında, yollar arasında kalıcı bir kapsamı olan bir denetleyici bile yaratabilir misiniz?

Bir hizmet uygulamanızın ömrü boyunca devam edeceği için bir hizmet kullanmanız gerekir.

Bir kullanıcıya ait verileri kaydetmek istediğinizi varsayalım

Hizmeti şu şekilde tanımlarsınız:

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

İlk kontrol cihazınızda:

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";

    });

Hizmet çalışacaktır, ancak bunu yalnızca sıradan kapsamları ve denetleyicileri kullanarak yapmanın mantıklı bir yolu, denetleyicilerinizi ve öğelerinizi modelinizin yapısını yansıtacak şekilde ayarlamaktır. Özellikle, bir üst kapsam oluşturan bir ana öğeye ve denetleyiciye ihtiyacınız vardır. Formun ayrı ayrı sayfaları, ebeveynin alt öğesi olan bir görünümde yer almalıdır. Üst kapsam, alt öğe görünümü güncellendiğinde bile devam eder.

Ui-yönlendirici kullandığınızı varsayıyorum, böylece yuvalanmış adlandırılmış görünümlere sahip olabilirsiniz. Sonra sözde kodda:

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

Daha sonra WizardController, çok sayfalı formun ("sihirbaz" olarak bahsettiğim) adımlarında korumak istediğiniz kapsam değişkenlerini tanımlar. Ardından rotalarınız stepViewyalnızca güncellenecektir . Her adımın kendi şablonları, denetleyicileri ve kapsamları olabilir, ancak bunların kapsamları sayfadan sayfaya kaybolur. Ancak WizardController'daki kapsamlar tüm sayfalarda korunur.

WizardController kapsamlarını alt denetleyicilerden güncellemek için, her kapsam değişkeni için WizardController'da $scope.$parent.myProp = 'value'bir işlev gibi sözdizimi kullanmanız veya tanımlamanız gerekir setMyProp. Aksi takdirde, ana kapsam değişkenlerini doğrudan alt denetleyicilerden ayarlamaya çalışırsanız, yalnızca alt öğe üzerinde yeni bir kapsam değişkeni oluşturarak ana değişkeni gölgelendirirsiniz.

Açıklaması zor ve tam bir örnek olmadığı için özür dilerim. Temel olarak, formunuzun tüm sayfalarında korunacak bir üst kapsam oluşturan bir üst denetleyici istiyorsunuz.

Veriler, denetleyiciler arasında iki yolla aktarılabilir

1. $rootScope
2. Modeli

Aşağıdaki örnek, model kullanılarak değerlerin geçişini göstermektedir

app.js

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

SharedService.js

function SharedService($rootScope){

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

// A denetleyicisindeki değeri değiştirin

Controller.js

function Controller($scope, SharedService){

 $scope.SharedService = SharedService;

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

// controllertwo'daki değere erişin

ControllerTwo.js

function ControllerTwo($scope, SharedService){

 $scope.SharedService = SharedService;

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

Bu yardımcı olur umarım.