Angularjs, phạm vi di chuyển giữa các tuyến đường

Tôi có một tình huống với một biểu mẫu trải dài trên nhiều trang (có thể không phải là lý tưởng, nhưng đó là cách nó được thực hiện). Tôi muốn có một phạm vi cho toàn bộ biểu mẫu được điền khi bạn thực hiện, để nếu người dùng qua lại giữa các bước sẽ dễ dàng ghi nhớ trạng thái.

Vì vậy, tôi cần phải làm, trong mã rất giả:

1. Bộ $scope.val = <Some dynamic data>
2. Nhấp vào một liên kết và được chuyển đến một mẫu mới (có thể với cùng một bộ điều khiển).
3. $scope.val vẫn nên giữ nguyên giá trị như ở trang cuối cùng.

Bằng cách nào đó, dữ liệu liên tục cho phạm vi có phải là cách thích hợp để giải quyết vấn đề này hay là có một số cách khác? Bạn thậm chí có thể tạo bộ điều khiển có phạm vi liên tục giữa các tuyến, tất nhiên là ngoại trừ việc lưu nó trong cơ sở dữ liệu.

Bạn cần sử dụng một dịch vụ vì một dịch vụ sẽ tồn tại trong suốt vòng đời ứng dụng của bạn.

Giả sử bạn muốn lưu dữ liệu liên quan đến người dùng

Đây là cách bạn xác định dịch vụ:

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

Trong bộ điều khiển đầu tiên của bạn:

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

    });

Dịch vụ sẽ hoạt động, nhưng một cách hợp lý để thực hiện nó chỉ bằng cách sử dụng các phạm vi và bộ điều khiển thông thường là thiết lập bộ điều khiển và phần tử của bạn để nó phản ánh cấu trúc mô hình của bạn. Đặc biệt, bạn cần một phần tử cha và bộ điều khiển thiết lập phạm vi cha. Các trang riêng lẻ của biểu mẫu phải nằm trong chế độ xem là trang con đối với trang chính. Phạm vi chính vẫn tồn tại ngay cả khi chế độ xem con được cập nhật.

Tôi giả sử bạn đang sử dụng ui-router để bạn có thể có các khung nhìn được đặt tên lồng nhau. Sau đó, trong mã giả:

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

Sau đó, WizardController xác định các biến phạm vi mà bạn muốn duy trì qua các bước của biểu mẫu nhiều trang (mà tôi đang đề cập đến như một "trình hướng dẫn"). Sau đó, các tuyến đường của bạn sẽ stepViewchỉ cập nhật . Mỗi bước có thể có các mẫu, bộ điều khiển và phạm vi riêng, nhưng phạm vi của chúng bị mất từ ​​trang này sang trang khác. Nhưng phạm vi trong WizardController được giữ nguyên trên tất cả các trang.

Để cập nhật phạm vi WizardController từ bộ điều khiển con, bạn sẽ cần sử dụng cú pháp như $scope.$parent.myProp = 'value'hoặc xác định một hàm setMyProptrên WizardController cho mỗi biến phạm vi. Ngược lại, nếu bạn cố gắng đặt các biến phạm vi cha trực tiếp từ bộ điều khiển con, thì cuối cùng bạn sẽ chỉ tạo một biến phạm vi mới trên chính con, che khuất biến cha.

Hơi khó giải thích và tôi xin lỗi vì thiếu một ví dụ đầy đủ. Về cơ bản, bạn muốn một bộ điều khiển cha thiết lập phạm vi cha, phạm vi này sẽ được giữ nguyên trên tất cả các trang trong biểu mẫu của bạn.

Dữ liệu có thể được truyền giữa các bộ điều khiển thông qua hai cách

1. $rootScope
2. Mô hình

Mẫu bên dưới minh họa việc truyền các giá trị bằng cách sử dụng mô hình

app.js

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

SharedService.js

function SharedService($rootScope){

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

// Sửa đổi giá trị trong bộ điều khiển A

Controller.js

function Controller($scope, SharedService){

 $scope.SharedService = SharedService;

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

// Truy cập giá trị trong điều khiển hai

ControllerTwo.js

function ControllerTwo($scope, SharedService){

 $scope.SharedService = SharedService;

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

Hi vọng điêu nay co ich.