javascript - navigationend - Actualizar la variable del ámbito principal en angular

router events subscribe angular 4

Question

Tengo dos controladores uno envuelto dentro de otro. Ahora sé que el ámbito hijo hereda propiedades del ámbito primario, pero ¿hay alguna manera de actualizar la variable del ámbito principal? Hasta ahora no he encontrado ninguna solución obvia.

En mi situación, tengo un controlador de calendario dentro de un formulario. Me gustaría actualizar las fechas de inicio y finalización del alcance principal (que es el formulario) para que el formulario tenga las fechas de inicio y finalización cuando se envíe.

Answer 1

Cuando asigna un atributo primitivo a un ámbito, siempre es local para el alcance (posiblemente creado sobre la marcha), incluso si un ámbito principal tiene un atributo con el mismo nombre. Esta es una decisión de diseño, y una buena en mi humilde opinión.

Si necesita cambiar algunas primitivas (ints, booleans, strings) en el ámbito principal, desde la vista, necesita que sea un atributo de otro objeto en ese ámbito, para que la tarea pueda leer:

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

y lo hará, a su vez:

1. obtener el objeto viewData desde cualquier ámbito en el que esté definido
2. asigna 4 a su atributo myAttr .

Answer 2

Debe usar un objeto (no una primitiva) en el ámbito principal y luego podrá actualizarlo directamente desde el ámbito secundario

Padre:

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

Niño:

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

Demostración de trabajo : http://jsfiddle.net/sh0ber/xxNxj/

Ver ¿Cuáles son los matices del alcance de la herencia prototípica / prototípica en AngularJS?

Answer 3

Esto también funciona (pero no estoy seguro si esto sigue las mejores prácticas o no)

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

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

Answer 4

Hay una forma más de hacer esta tarea y no usar la variable $scope.$parent .

Simplemente prepare un método para cambiar el valor en el alcance principal y úselo en el niño uno. Me gusta esto:

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

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

También funciona y le da más control sobre los cambios de valor.

También puede llamar al método incluso en HTML como: <a ng-click="changeSimpleValue(''y'')" href="#">click me!</a> .

Answer 5

Para acceder a las variables declaradas en el padre, deberíamos usar $ parent en el controlador o archivo de plantilla

En el controlador

$scope.$parent.varaiable_name

En plantilla html

ng-model="$parent.varaiable_name"