Comment partager des données $scope entre les États dans AngularJS UI-Router ?

Transmission des données $scope d'un état à l'autre dans AngularJS UI-Router

Dans AngularJS UI-Router, la navigation entre les états enfants n'hérite pas automatiquement des données $scope du parent contrôleur. Cela peut poser des défis lorsqu'il est nécessaire de partager des données entre les États.

Héritage des vues imbriquées

La clé du partage des données $scope entre les États réside dans l'utilisation du mécanisme d'héritage fourni par la hiérarchie des vues de UI-Router. Lorsque les vues enfants sont imbriquées dans la vue parent, la portée enfant hérite des propriétés de la portée parent.

Comprendre l'héritage de la portée AngularJS

Les portées AngularJS héritent de manière prototypique, ce qui signifie que les portées enfants héritent des propriétés et des méthodes de leurs portée parent. En utilisant '.' dans les noms de propriété dans la directive ng-model garantit que les propriétés sont héritées.

Implémentation

Pour partager les données $scope entre les états, suivez ces étapes :

1. Définir un type de référence (par exemple, un objet) dans $scope, tel que $scope.Model.
2. Dans l'état parent, initialisez l'objet Modèle (par exemple, $scope.Model = $scope.Model || { Nom : "xxx"}).
3. Dans l'état enfant, accédez à l'objet Model en utilisant ng-model="Model.PropertyName" (par exemple, ).

Exemple

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

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

En suivant ces étapes, vous pouvez partager de manière transparente les données $scope entre les états dans UI-Router, garantissant ainsi un accès cohérent aux données à travers votre candidature.

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!