Comment partager des données $scope entre les États dans le routeur UI AngularJS sans services ?

Partage de données $scope entre États dans AngularJS UI-Router

Dans les applications AngularJS utilisant UI-Router pour la gestion des états, il peut y avoir un besoin de partager les données $scope entre les États parents et enfants. Sans employer un service ou des observateurs alambiqués, comment pouvons-nous y parvenir ?

Utilisation de l'héritage de la hiérarchie des vues

AngularJS UI-Router fournit l'héritage des propriétés de portée uniquement lorsque la vue enfant est imbriqué dans la vue parent. Cela signifie que les modèles des états enfants doivent être imbriqués dans le modèle de la vue parent.

Par exemple, considérons les définitions d'état suivantes :

.state("main", {
 controller:'mainController',
 url:"/main",
 templateUrl: "main_init.html"
})  
.state("main.1", {
 controller:'mainController',
 parent: 'main',
 url:"/1",
 templateUrl: 'form_1.html'
})  
.state("main.2", {
 controller:'mainController',
 parent: 'main',
 url: "/2",
 templateUrl: 'form_2.html'
})  

Dans ce scénario, les vues du les états enfants ("form_1.html" et "form_2.html") sont imbriqués dans la vue de l'état parent ("main_init.html"). Cela permet l'héritage des propriétés $scope de l'état parent vers les états enfants.

Utilisation des types de référence et de la notation par points

Pour garantir que les données sont partagées, il est Il est crucial de définir un type de référence dans le $scope du contrôleur parent en utilisant la notation par points. Par exemple :

controller('mainController', function ($scope) {
  $scope.Model = $scope.Model || {Name : "xxx"};
})

En utilisant la notation par points, nous garantissons que $scope.Model est un type de référence. Lorsqu'il est accessible dans un état enfant, il s'agira de la même instance de $scope.Model créée dans l'état parent, facilitant le partage de données.

Exemple

Dans l'exemple fourni dans la question, le contrôleur principal et les états enfants sont correctement configurés pour l'héritage de portée. Le problème réside dans l’utilisation inappropriée de la notation par points. En modifiant le ng-model dans l'état enfant pour référencer $scope.Model.Name, le partage de données sera établi.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!