web-dev-qa-db-fra.com

Mettre à jour la variable d'étendue parent dans angular

J'ai deux contrôleurs, l'un enveloppé dans un autre. Maintenant, je sais que la portée enfant hérite des propriétés de la portée parent, mais existe-t-il un moyen de mettre à jour la variable de portée parent? Jusqu'à présent, je n'ai trouvé aucune solution évidente.

Dans ma situation, j'ai un contrôleur de calendrier dans un formulaire. Je souhaite mettre à jour les dates de début et de fin à partir de la portée parente (qui est le formulaire) afin que le formulaire ait les dates de début et de fin lors de la soumission.

javascriptangularjsangularjs-scope
113
Malcr001

Vous devez utiliser un objet (pas une primitive) dans la portée parente et vous pourrez ensuite le mettre à jour directement à partir de la portée enfant.

Parent: 

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

Enfant: 

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

Démo de travail : http://jsfiddle.net/sh0ber/xxNxj/

Voir Quelles sont les nuances de l'héritage prototypal/prototypique dans AngularJS?

189
Dan

Il existe un autre moyen d'effectuer cette tâche et de ne pas utiliser la variable $scope.$parent.

Préparez simplement une méthode pour changer la valeur dans la portée parent et utilisez-la dans l’enfant 1. Comme ça:

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

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

Cela fonctionne également et vous donne plus de contrôle sur les changements de valeur.

Vous pouvez alors aussi appeler la méthode même en HTML, comme par exemple: <a ng-click="changeSimpleValue('y')" href="#">click me!</a>.

116
Ravbaker

Cela fonctionne aussi (mais pas sûr si cela suit les meilleures pratiques ou non)

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

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

Lorsque vous affectez un attribut primitif à une étendue, il est toujours local à l'étendue (éventuellement créée à la volée), même si une étendue parent a un attribut portant le même nom. Ceci est une décision de conception, et un bon à mon humble avis.

Si vous devez modifier des primitives (ints, booleans, chaines) dans la portée parente de la vue, vous devez en faire l'attribut d'un autre objet de cette portée afin que l'affectation puisse se lire:

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

et à son tour:

  1. récupère l'objet viewData de n'importe quelle portée dans laquelle il est défini
  2. attribuez 4 à son attribut myAttr.
4
rewritten

Pour accéder aux variables déclarées dans le parent, nous devrions utiliser $ parent dans le contrôleur enfant ou le fichier de modèle.

Dans le contrôleur

$scope.$parent.varaiable_name

Modèle html

ng-model="$parent.varaiable_name"
2
Nibu