AngularJS - Acceso al ámbito secundario

Si tengo los siguientes controladores:

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

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

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

¿Cuál es la forma correcta de dejar salir la parentlectura ? Si es necesario definir en , ¿no lo haría semánticamente incorrecto asumiendo que es una propiedad que describe algo relacionado y no ?bchildbparentbchildparent

Actualización: Pensando más en ello, si más de un niño lo tuviera b, se crearía un conflicto por parentel cual brecuperar. Mi pregunta sigue siendo, ¿cuál es la forma correcta de acceder bdesde parent?

Los ámbitos en AngularJS utilizan la herencia prototípica, al buscar una propiedad en un ámbito secundario, el intérprete buscará la cadena del prototipo a partir del elemento secundario y continuará hasta los padres hasta que encuentre la propiedad, no al revés.

Consulte los comentarios de Vojta sobre el problema https://groups.google.com/d/msg/angular/LDNz_TQQiNE/ygYrSvdI0A0J

En pocas palabras: no puede acceder a los ámbitos secundarios desde un ámbito principal.

Tus soluciones:

1. Defina propiedades en los padres y acceda a ellas desde los niños (lea el enlace de arriba)
2. Utilizar un servicio para compartir el estado
3. Pasar datos a través de eventos. $emitenvía eventos hacia arriba a los padres hasta el alcance raíz y $broadcastenvía eventos hacia abajo. Esto podría ayudarlo a mantener las cosas semánticamente correctas.

Si bien la respuesta de jm-es la mejor manera de manejar este caso, para referencia futura es posible acceder a los ámbitos secundarios utilizando los miembros $$ childHead, $$ childTail, $$ nextSibling y $$ prevSibling de un alcance. Estos no están documentados, por lo que pueden cambiar sin previo aviso, pero están ahí si realmente necesita atravesar los ámbitos.

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

Violín

Puedes probar esto:

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

luego en el controlador secundario (alcance) agregue:

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

Ahora el padre tiene acceso al alcance del niño.

Una posible solución es inyectar el controlador secundario en el controlador principal mediante una función de inicio.

Posible implementación:

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

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

¿Dónde ChildControllertienes:

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

}])

Entonces ahora en el ParentControllerpuedes usar:

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

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

}])

Importante:
Para que funcione correctamente, debe usar la directiva ng-controllery cambiar el nombre de cada controlador ascomo lo hice en el html, por ejemplo.

Consejos:
Utilice el plugin ng-inspector de Chrome durante el proceso. Te ayudará a entender el árbol.

Usando $ emit y $ broadcast , (como lo menciona walv en los comentarios anteriores)

Para disparar un evento hacia arriba (de niño a padre)

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

Para disparar un evento hacia abajo (de padre a hijo)

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

y finalmente escuchar

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

Para más detalles: - https://toddmotto.com/all-about-angulars-emit-broadcast-on-publish-subscribing/

Disfruta :)

Sí, podemos asignar variables del controlador secundario a las variables del controlador principal. Esta es una forma posible:

Descripción general: el objetivo principal del código, a continuación, es asignar $ scope.variable del controlador secundario al $ scope.assign del controlador principal

Explicación: Hay dos controladores. En el html, observe que el controlador principal incluye el controlador secundario. Eso significa que el controlador principal se ejecutará antes que el controlador secundario. Entonces, primero se definirá setValue () y luego el control irá al controlador secundario. $ scope.variable se asignará como "hijo". Luego, este alcance secundario se pasará como un argumento a la función del controlador principal, donde $ scope.assign obtendrá el valor como "secundario"

<!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>