Angular JS propage les changements de variables de la portée enfant à la portée parent

Question

Comment puis-je prendre les changements de variables et les propager facilement vers la ParentCtrl malgré l'instanciation d'une "nouvelle" var dans la ChildCtrl ? Des points supplémentaires pour un minimum ou l'absence de $on's et $watch's (ce qui facilite l'implémentation).

ParentCtrl

• ChildCtrl / ChildCtrl2 / ChildCtrl3 / ChildCtrl4

  • Voir

Mes ChildCtrl sont juste assez différents pour que je ne puisse pas facilement abstraire une mise en page principale et une ng-view, mais ils dépendent tous des mêmes fonctions dans ParentCtrl.

$scope.searchTerms est défini dans ParentCtrl mais le champ de saisie avec ng-model='searchTerms' est dans la vue des contrôleurs enfants. Lorsque cette variable change, elle n'est pas reflétée dans le ParentCtrl, mais seulement dans les ChildCtrls.

Exemple : http://jsfiddle.net/JHwxP/22/

HTML partiel

<div ng-app>
    <div ng-controller="Parent">
        parentX = {{x}} <br/>
        parentY = {{y}}<br/>
        <div ng-controller="Child">
            childX = {{x}}<br/>
            childY = {{y}}<br/>
            <a ng-click="modifyBothScopes()">modifyBothScopes</a><br>
            <br>
            The changes here need to appear in 'Parent'. <input ng-model='y'>
        </div>
    </div>
</div>

Contrôleurs

function Parent($scope) {
    $scope.x= 5;
    $scope.y= 5;
}

function Child($scope) {
    $scope.modifyBothScopes= function() {
       $scope.$parent.x++;
    };  
}

UPDATE

Je suis actuellement en train d'essayer une approche de service partagé : https://gist.github.com/exclsr/3595424

UPDATE

Essayer un système d'émission/diffusion

SOLVED Problème : J'enregistrais $scope.searchTerms dans le parent et quand il était modifié, cela créait un espace dans l'enfant $scope.

La solution : J'aurais dû faire $scope.search.terms dans le parent et quand il était modifié dans l'enfant, il était répercuté dans le parent.

Exemple : http://jsfiddle.net/JHwxP/23/

Answer 1

Cela est dû au fonctionnement de l'héritage prototypique.

Lorsque vous demandez $scope.x dans le contrôleur enfant, il vérifie si x est défini dans sa portée et, si ce n'est pas le cas, il recherche x dans la portée parent.

Si vous attribuez à l'étendue enfant x il ne modifie que l'étendue enfant.

Une façon simple de gérer cela et d'obtenir le comportement de partage est d'utiliser un objet ou un tableau.

function ParentCtrl($scope) {
  $scope.model = {x: 5, y: 5};
}

function ChildCtrl($scope) {
  $scope.update = function(x, y) {
    $scope.model.x = x;
    $scope.model.y = y;
  };
}

Ici, les changements seront visibles dans les deux scopes, car $scope.model fera référence au même objet dans les deux scopes, parent et enfant.

John Lindquist a un vidéo sur ce sujet .

Answer 2

Une autre solution qui n'implique pas la création d'un ensemble d'objets à transmettre par référence consiste à créer des fonctions de paramétrage dans le contrôleur parent.

function ParentCtrl($scope) {
  $scope.x = 5;
  $scope.y = 5;

  $scope.setX = function(value) {
    $scope.x = value;
  }

  $scope.setY = function(value) {
    $scope.y = value;
  }
}

function ChildCtrl($scope) {
  $scope.update = function(x, y) {
    $scope.setX(x);
    $scope.setY(y);
  };
}

Je trouve que c'est plus propre lorsque cela n'a pas de sens que les données fassent partie du même objet.

Vous pourriez aussi devenir fou et faire quelque chose comme ça dans l'enfant :

function ChildCtrl($scope) {
  var superSetX = $scope.setX;
  $scope.setX = function(value) {
    superSetX(value * 2);
  };
  ...
}

Answer 3

Je cherchais quelque chose comme ça. La première solution est venue après avoir lu este . Vous pouvez partager un modèle parent avec un contrôleur enfant.

Voici un exemple . J'utilise même un tableau d'éléments pour prouver mon point de vue. Le site ChildController es en changeant son parent, comme s'ils faisaient tous partie du même univers.