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-is є найкращим способом вирішення цього випадку, для подальшої довідки можна отримати доступ до областей дитини, використовуючи $$ 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, наприклад.

Поради:
Використовуйте хромовий плагін ng-інспектор під час процесу. Це допоможе вам зрозуміти дерево.

Використання $ 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/

Насолоджуйтесь :)

Так, ми можемо призначити змінні від дочірнього контролера до змінних у батьківському контролері. Це один із можливих способів:

Огляд: Основна мета коду нижче - присвоїти дочірньому контролеру $ range.variable батьківському контролеру $ range.assign

Пояснення: Є два контролери. У html зверніть увагу, що батьківський контролер додає дочірній контролер. Це означає, що батьківський контролер буде виконаний перед дочірнім контролером. Отже, спочатку буде визначено setValue (), а потім управління перейде до дочірнього контролера. $ range.variable буде призначено як "дочірня". Тоді ця дочірня область буде передана як аргумент функції батьківського контролера, де $ Domain.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>