AngularJS - เข้าถึงขอบเขตลูก

หากฉันมีตัวควบคุมต่อไปนี้:

function parent($scope, service) {
    $scope.a = 'foo';

    $scope.save = function() {
        service.save({
            a:  $scope.a,
            b:  $scope.b
        });
    }
}

function child($scope) {
    $scope.b = 'bar';
}

เป็นวิธีที่เหมาะสมเพื่อให้parentอ่านbออกมาจากchild? หากจำเป็นต้องกำหนดbในสิ่งparentนั้นจะไม่ทำให้ความหมายไม่ถูกต้องโดยสมมติว่าbเป็นคุณสมบัติที่อธิบายสิ่งที่เกี่ยวข้องหรือchildไม่parent?

อัปเดต:การพิจารณาเพิ่มเติมเกี่ยวกับเรื่องนี้หากมีเด็กมากกว่าหนึ่งคนbจะสร้างความขัดแย้งparentในbการดึงข้อมูล ฉันยังคงเป็นคำถามสิ่งที่เป็นวิธีการที่เหมาะสมในการเข้าถึงbจากparent?

ขอบเขตใน AngularJS ใช้การสืบทอดต้นแบบเมื่อค้นหาคุณสมบัติในขอบเขตลูกล่ามจะค้นหาห่วงโซ่ต้นแบบโดยเริ่มจากเด็กและไปยังผู้ปกครองจนกว่าจะพบคุณสมบัติไม่ใช่ในทางอื่น

ตรวจสอบความคิดเห็นของ Vojta เกี่ยวกับปัญหานี้https://groups.google.com/d/msg/angular/LDNz_TQQiNE/ygYrSvdI0A0J

สรุป: คุณไม่สามารถเข้าถึงขอบเขตลูกจากขอบเขตหลัก

โซลูชันของคุณ:

1. กำหนดคุณสมบัติในผู้ปกครองและเข้าถึงได้ตั้งแต่เด็ก ๆ (อ่านลิงค์ด้านบน)
2. ใช้บริการเพื่อแบ่งปันสถานะ
3. ส่งผ่านข้อมูลผ่านเหตุการณ์ $emitส่งเหตุการณ์ขึ้นไปยังผู้ปกครองจนถึงขอบเขตรูทและ$broadcastยื้อเหตุการณ์ลงด้านล่าง วิธีนี้อาจช่วยให้คุณรักษาความหมายได้ถูกต้อง

แม้ว่าคำตอบของ jm-'จะเป็นวิธีที่ดีที่สุดในการจัดการกรณีนี้ แต่สำหรับการอ้างอิงในอนาคตคุณสามารถเข้าถึงขอบเขตย่อยได้โดยใช้ $$ childHead, $$ childTail, $$ nextSibling และ $$ prevSibling สมาชิกของขอบเขต เหล่านี้ไม่ได้รับการบันทึกไว้เพื่อให้พวกเขาอาจมีการเปลี่ยนแปลงโดยไม่ต้องแจ้งให้ทราบล่วงหน้า แต่พวกเขากำลังมีถ้าคุณจริงๆต้องขวางขอบเขต

// get $$childHead first and then iterate that scope's $$nextSiblings
for(var cs = scope.$$childHead; cs; cs = cs.$$nextSibling) {
    // cs is child scope
}

ซอ

คุณสามารถลองสิ่งนี้:

$scope.child = {} //declare it in parent controller (scope)

จากนั้นในตัวควบคุมเด็ก (ขอบเขต) เพิ่ม:

var parentScope = $scope.$parent;
parentScope.child = $scope;

ตอนนี้ผู้ปกครองสามารถเข้าถึงขอบเขตของเด็กได้แล้ว

วิธีแก้ปัญหาหนึ่งที่เป็นไปได้คือฉีดตัวควบคุมลูกในตัวควบคุมหลักโดยใช้ฟังก์ชัน init

การใช้งานที่เป็นไปได้:

<div ng-controller="ParentController as parentCtrl">
   ...

    <div ng-controller="ChildController as childCtrl" 
         ng-init="ChildCtrl.init()">
       ...
    </div>
</div>

ChildControllerคุณมีที่ไหน:

app.controller('ChildController',
    ['$scope', '$rootScope', function ($scope, $rootScope) {
    this.init = function() {
         $scope.parentCtrl.childCtrl = $scope.childCtrl;
         $scope.childCtrl.test = 'aaaa';
    };

}])

ตอนนี้ParentControllerคุณสามารถใช้:

app.controller('ParentController',
    ['$scope', '$rootScope', 'service', function ($scope, $rootScope, service) {

    this.save = function() {
        service.save({
            a:  $scope.parentCtrl.ChildCtrl.test
        });
     };

}])

สำคัญ:
ในการทำงานอย่างถูกต้องคุณต้องใช้คำสั่งng-controllerและเปลี่ยนชื่อคอนโทรลเลอร์แต่ละตัวโดยใช้asเหมือนที่ฉันทำใน html เช่น

เคล็ดลับ:
ใช้ปลั๊กอิน chrome ng-inspectorในระหว่างกระบวนการ จะช่วยให้คุณเข้าใจต้นไม้

การใช้$ emitและ$ broadcast (ตามที่ walv กล่าวไว้ในความคิดเห็นด้านบน)

เพื่อเริ่มต้นเหตุการณ์ (จากเด็กไปยังผู้ปกครอง)

$scope.$emit('myTestEvent', 'Data to send');

เพื่อเริ่มต้นเหตุการณ์ลง (จากแม่สู่ลูก)

$scope.$broadcast('myTestEvent', {
  someProp: 'Sending you some data'
});

และสุดท้ายที่จะฟัง

$scope.$on('myTestEvent', function (event, data) {
  console.log(data);
});

สำหรับรายละเอียดเพิ่มเติม: - https://toddmotto.com/all-about-angulars-emit-broadcast-on-publish-subscribing/

สนุก :)

ได้เราสามารถกำหนดตัวแปรจากตัวควบคุมลูกไปยังตัวแปรในตัวควบคุมหลักได้ นี่เป็นวิธีหนึ่งที่เป็นไปได้:

ภาพรวม:จุดมุ่งหมายหลักของโค้ดด้านล่างนี้คือการกำหนด $ scope ของตัวควบคุมเด็กตัวแปรให้กับ $ scope.assign ของตัวควบคุมหลัก

คำอธิบาย:มีตัวควบคุมสองตัว ใน html โปรดสังเกตว่าพาเรนต์คอนโทรลเลอร์อยู่ในตัวควบคุมลูก นั่นหมายความว่าตัวควบคุมหลักจะถูกดำเนินการก่อนตัวควบคุมลูก ดังนั้นขั้นแรก setValue () จะถูกกำหนดจากนั้นตัวควบคุมจะไปที่ตัวควบคุมลูก $ scope.variable จะถูกกำหนดให้เป็น "child" จากนั้นขอบเขตลูกนี้จะถูกส่งเป็นอาร์กิวเมนต์ไปยังฟังก์ชันของตัวควบคุมหลักโดยที่ $ scope.assign จะได้รับค่าเป็น "ลูก"

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<script type="text/javascript">
    var app = angular.module('myApp',[]);

    app.controller('child',function($scope){
        $scope.variable = "child";
        $scope.$parent.setValue($scope);
    });

    app.controller('parent',function($scope){
        $scope.setValue = function(childscope) {
            $scope.assign = childscope.variable;
        }
    });

</script>
<body ng-app="myApp">
 <div ng-controller="parent">
    <p>this is parent: {{assign}}</p>
    <div ng-controller="child">
        <p>this is {{variable}}</p>
    </div>
 </div>
</body>
</html>