Comment partager des données entre les états du routeur UI AngularJS sans services ni observateurs ?

Partage de données $scope entre les États du routeur UI AngularJS sans services ni observateurs

Dans UI-Router, il peut être difficile de partager des données entre le $scope d'un le contrôleur principal et ses états enfants sans compter sur les services ou les observateurs du contrôleur parent.

Solution :

La clé réside dans la compréhension de la relation entre les portées AngularJS et les vues UI-Router :

• Héritage de la portée par hiérarchie de vues uniquement : Les portées sont héritées le long de la chaîne d'état uniquement si les vues d'état sont imbriquées.
• Comprendre les portées : Enfant les étendues héritent normalement de manière prototypique des étendues parents. En utilisant '.' La notation (par exemple, Model.PropertyName) garantit cet héritage.

Mise en œuvre technique :

1. Définir les vues imbriquées : Assurez-vous que les vues d'état enfants sont imbriquées dans la vue parent.
2. Utilisez les valeurs de type de référence : Dans votre modèle $scope, utilisez des objets ou des références transmises par référence, plutôt que des valeurs primitives.
3. Utilisez la notation par points : Dans vos définitions de modèle ng, utilisez la notation par points pour garantir l'héritage prototypique (par exemple, Model.PropertyName au lieu de PropertyName).

Exemple :

Considérez la définition d'état UI-Router suivante :

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

Dans le mainController, initialisez le modèle de données partagé comme suit :

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

Dans vos modèles d'état enfants, utilisez ng-model avec notation par points pour accéder aux données partagées :

<input type="text" ng-model="Model.Name">

En suivant ces étapes, vous pouvez partager efficacement des données entre $scopes dans les états UI-Router sans avoir besoin de services ou d'observateurs dans les contrôleurs parents.

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!