Détruisez la portée avant de changer de chemin dans ui-router

J'utilise le routage UI-Router . Lorsque je change de chemin d'un état à l'autre et que je remonte au même état, je vois que l'ancien état de la portée est là (avec ses propriétés) .

Je veux détruire cette portée $ avant les changements d'état. Donc, quand je reviens à l'état pour la deuxième fois, il y aura une nouvelle portée propre. J'ai essayé d'accéder à la portée de cet événement:

 $rootScope.$on('$stateChangeStart', function(event, toState, toParams, fromState, fromParams) { // fromState.$scope.$destroy(); });

Mais il n'y a aucune référence à la portée de $. Puis-je accéder à la portée avant de changer l'état de l' UI-Router angulaire?

Je dirais que ce que vous ressentez est un peu différent de celui que vous avez décrit, ou vous avez pensé que ce qui se passe. S'il vous plaît, vérifiez par exemple ceci:

Comment puis-je partager les données de portée $ entre les états dans angularjs ui-router?
L'arborescence et l'instanciation du contrôleur avec ui routeur

En général, une fois que le changement d'état est effectué (non rejeté), l' ancien $ est certainement détruit . Si nous naviguons alors en arrière, une nouvelle $scope est créée pour nous. Mais cette portée $ est créée de cette façon:

Le code source de la vueDirective.js

  function updateView(firstTime) { var newScope, name = getUiViewName(scope, attrs, $element, $interpolate), previousLocals = name && $state.$current && $state.$current.locals[name]; if (!firstTime && previousLocals === latestLocals) return; // nothing to do // HERE newScope = scope.$new(); ...

La construction: scope.$new(); Est une clé de compréhension. Cela signifie en fait que nous utilisons des héritages prototypiques

Quelles sont les nuances de portée de l'héritage prototypique / prototypique dans AngularJS?

Et cela en un mot pourrait être décrit:

Nous avons une $scope qui a cloné toutes les propriétés de son parent.

Donc, si parent contient une référence (a '.' Dans le chemin) comme ça

 // parent scope $scope.Model = { ... };

Et tout état enfant changera comme ça

 $scope.Model.name = "User";

Cette valeur sera stockée à l' état parent $ scope et disponible à nouveau … pour tout prochain enfant de cet état.

REMARQUE: le même viewDirective.js mais elswhere pourrait être utilisé pour démontrer le fait – $scope is destroyed si nous quittons l'état:

  function cleanupLastView() { if (previousEl) { previousEl.remove(); previousEl = null; } if (currentScope) { currentScope.$destroy(); currentScope = null; } ...

ÉTENDRE

J'ai créé un exemple de travail ici , avec ces deux états:

 .controller('ParentCtrl', ['$scope', function ($scope) { $scope.Model = { SharedName: "This is shared name", } $scope.NotSharedName = $scope.NotSharedName || "This name is cloned, but then lives its own way"; }]) .controller('ChildCtrl', ['$scope', function ($scope) {}])

Et ces deux façons de modifier les valeurs (tout suivra la logique décrite ci-dessus) :

 <p>this will be shared among all children and parent <input ng-model="Model.SharedName" /> </p> <p>this will always copied from parent, live then in each child <input ng-model="NotSharedName" /> </p>

Vérifiez ici

J'allais faire un commentaire complémentaire sur le message de Radim Köhler, mais puisque je n'ai pas assez de points de rep, je vais simplement ajouter une réponse que la seule solution que j'ai utilisée jusqu'ici pour contourner ceci est d'utiliser le Approche "contrôleur" et évite d'ajouter des méthodes / propriétés sur la portée du contrôleur que je ne veux pas en conflit en raison d'un comportement prototypique.