Angularjs ขอบเขตการส่งผ่านระหว่างเส้นทาง

Question 1

ฉันมีสถานการณ์ที่มีรูปแบบที่ขยายไปหลายหน้า (อาจไม่เหมาะ แต่เป็นอย่างนั้น) ฉันต้องการให้มีขอบเขตเดียวสำหรับแบบฟอร์มทั้งหมดที่ได้รับการกรอกข้อมูลในขณะที่คุณดำเนินการดังนั้นหากผู้ใช้ไปมาระหว่างขั้นตอนต่างๆคุณจะจำสถานะได้ง่าย

ดังนั้นฉันต้องทำในรหัสหลอกมาก:

ชุด $scope.val = <Some dynamic data>
คลิกลิงก์และกำหนดเส้นทางไปยังเทมเพลตใหม่ (อาจใช้คอนโทรลเลอร์เดียวกัน)
$scope.val ควรจะยังคงเป็นค่าเดียวกับในหน้าสุดท้าย

ข้อมูลที่มีอยู่อย่างต่อเนื่องสำหรับขอบเขตเป็นวิธีที่ถูกต้องในการดำเนินการนี้หรือมีวิธีอื่นหรือไม่? คุณสามารถสร้างคอนโทรลเลอร์ที่มีขอบเขตต่อเนื่องระหว่างเส้นทางได้หรือไม่ยกเว้นการบันทึกไว้ในฐานข้อมูลแน่นอน

Question 2

คุณต้องใช้บริการเนื่องจากบริการจะคงอยู่ตลอดอายุแอปของคุณ

สมมติว่าคุณต้องการบันทึกข้อมูลที่เกี่ยวข้องกับผู้ใช้

นี่คือวิธีที่คุณกำหนดบริการ:

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

ในคอนโทรลเลอร์แรกของคุณ:

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

    });

Question 3

บริการจะทำงานได้ แต่วิธีที่เป็นตรรกะในการดำเนินการโดยใช้ขอบเขตและตัวควบคุมธรรมดาเท่านั้นคือการตั้งค่าตัวควบคุมและองค์ประกอบของคุณเพื่อให้สะท้อนถึงโครงสร้างของแบบจำลองของคุณ โดยเฉพาะอย่างยิ่งคุณต้องมีองค์ประกอบหลักและตัวควบคุมที่สร้างขอบเขตหลัก แต่ละหน้าของฟอร์มควรอยู่ในมุมมองที่เป็นลูกของผู้ปกครอง ขอบเขตพาเรนต์ยังคงมีอยู่แม้ว่าจะมีการอัปเดตมุมมองลูก

ฉันคิดว่าคุณกำลังใช้ui-routerดังนั้นคุณสามารถมีมุมมองที่มีชื่อซ้อนกัน จากนั้นในรหัสหลอก:

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

จากนั้น WizardController จะกำหนดตัวแปรขอบเขตที่คุณต้องการเก็บรักษาตามขั้นตอนของแบบฟอร์มหลายหน้า (ซึ่งฉันหมายถึง "ตัวช่วยสร้าง") จากนั้นเส้นทางของคุณจะอัปเดตstepViewเท่านั้น แต่ละขั้นตอนสามารถมีเทมเพลตตัวควบคุมและขอบเขตของตัวเองได้ แต่ขอบเขตจะหายไปจากหน้าไปอีกหน้าหนึ่ง แต่ขอบเขตใน WizardController จะถูกเก็บไว้ในทุกหน้า

ในการอัปเดตขอบเขต WizardController จากตัวควบคุมลูกคุณจะต้องใช้ไวยากรณ์เช่น$scope.$parent.myProp = 'value'หรือกำหนดฟังก์ชันsetMyPropบน WizardController สำหรับตัวแปรขอบเขตแต่ละตัว มิฉะนั้นหากคุณพยายามตั้งค่าตัวแปรขอบเขตหลักจากตัวควบคุมลูกโดยตรงคุณจะจบลงด้วยการสร้างตัวแปรขอบเขตใหม่บนตัวลูกเองโดยจะทำให้ตัวแปรหลักเป็นเงา

ยากที่จะอธิบายและขออภัยที่ไม่มีตัวอย่างเต็มรูปแบบ โดยทั่วไปคุณต้องการตัวควบคุมหลักที่สร้างขอบเขตหลักซึ่งจะถูกเก็บรักษาไว้ในทุกหน้าของแบบฟอร์มของคุณ

Question 4

ข้อมูลสามารถส่งผ่านระหว่างคอนโทรลเลอร์ได้สองทาง

$rootScope
รุ่น

ตัวอย่างด้านล่างแสดงให้เห็นถึงการส่งผ่านค่าโดยใช้แบบจำลอง

app.js

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

SharedService.js

function SharedService($rootScope){

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

// แก้ไขค่าในคอนโทรลเลอร์ก

Controller.js

function Controller($scope, SharedService){

 $scope.SharedService = SharedService;

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

// เข้าถึงค่าใน controllertwo

ControllerTwo.js

function ControllerTwo($scope, SharedService){

 $scope.SharedService = SharedService;

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

หวังว่านี่จะช่วยได้