อัพเดตตัวแปรขอบเขตหลักใน AngularJS

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

ในสถานการณ์ของฉันฉันมีตัวควบคุมปฏิทินในแบบฟอร์ม ฉันต้องการอัปเดตวันที่เริ่มต้นและวันที่สิ้นสุดจากขอบเขตหลัก (ซึ่งก็คือแบบฟอร์ม) เพื่อให้แบบฟอร์มมีวันที่เริ่มต้นและวันที่สิ้นสุดเมื่อส่ง

คุณต้องใช้วัตถุ (ไม่ใช่ดั้งเดิม) ในขอบเขตหลักจากนั้นคุณจะสามารถอัปเดตได้โดยตรงจากขอบเขตลูก

ต้นทาง:

app.controller('ctrlParent',function($scope){
    $scope.parentprimitive = "someprimitive";
    $scope.parentobj = {};
    $scope.parentobj.parentproperty = "someproperty";
});

เด็ก:

app.controller('ctrlChild',function($scope){
    $scope.parentprimitive = "this will NOT modify the parent"; //new child scope variable
    $scope.parentobj.parentproperty = "this WILL modify the parent";
});

การสาธิตการทำงาน : http://jsfiddle.net/sh0ber/xxNxj/

ดูอะไรคือความแตกต่างของการสืบทอดต้นแบบขอบเขต / ต้นแบบใน AngularJS

มีอีกวิธีหนึ่งในการทำงานนี้และไม่ใช้$scope.$parentตัวแปร

เพียงเตรียมวิธีการเปลี่ยนค่าในขอบเขตหลักและใช้ในขอบเขตลูก แบบนี้:

app.controller('ctrlParent',function($scope) {
  $scope.simpleValue = 'x';
  $scope.changeSimpleValue = function(newVal) {
    $scope.simpleValue = newVal;
  };
});

app.controller('ctrlChild',function($scope){
    $scope.changeSimpleValue('y');
});

นอกจากนี้ยังทำงานและให้คุณควบคุมการเปลี่ยนแปลงค่าได้มากขึ้น

จากนั้นคุณสามารถยังเรียกวิธีแม้ใน HTML <a ng-click="changeSimpleValue('y')" href="#">click me!</a>ที่ชอบ:

วิธีนี้ใช้งานได้เช่นกัน (แต่ไม่แน่ใจว่าเป็นไปตามแนวทางปฏิบัติที่ดีที่สุดหรือไม่)

app.controller('ctrlParent',function($scope) {
    $scope.simpleValue = 'x';
});

app.controller('ctrlChild',function($scope){
    $scope.$parent.simpleValue = 'y';
});

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

หากคุณต้องการเปลี่ยนพื้นฐานบางอย่าง (ints, booleans, strings) ในขอบเขตหลักจากมุมมองคุณจะต้องเป็นแอตทริบิวต์ของออบเจ็กต์อื่นในขอบเขตนั้นดังนั้นการกำหนดอาจอ่าน:

<a ng-click="viewData.myAttr = 4">Click me!</a>

และในทางกลับกัน:

1. รับไฟล์ viewDataวัตถุจากขอบเขตที่กำหนดไว้
2. กำหนด 4 ให้กับmyAttrแอตทริบิวต์

สำหรับการเข้าถึงตัวแปรที่ประกาศใน parent เราควรใช้ $ parent ใน child controller หรือ template file

ในตัวควบคุม

$scope.$parent.varaiable_name

ในเทมเพลต html

ng-model="$parent.varaiable_name"