AngularJS : Transmettre des données de l'état $à l'état.aller dans angular-ui-router

Je suis en train de faire un éditeur de documents. Les Documents peuvent être de Type A ou de Type B. Ils sont accessibles à l'url spécifiée par l'id du document, mais le code ne précise pas si le document est de type A ou B.

Donc, j'ai besoin de charger le document en id, déterminer son type de données, puis de passer à la TypeAController ou TypeBController.

Droit maintenant, avec l'interface utilisateur du routeur, j'ai quelque chose comme ceci:

$stateProvider
.state('loading', {
    url: '/{documentId}',
    template: 'Loading...',
    controller: function ($stateParams, $state) {
        loadDocument($stateParams.documentId)
            .then(function (loadedDocument) {
                if (loadedDocument.type === 'A') {
                    $state.go('EditA');
                } else if (loadedDocument.type === 'B') {
                    $state.go('EditB');
                }
            })
    }
})
.state('A', {...})
.state('B', {...})

Le chargement de l'état charge le document, détermine son type, puis passe à l'état suivant.

Frustrant, cependant, je ne peux pas trouver un moyen de passer le document chargé de la prochaine unis! Je peux faire un globalish service dans lequel je peux insérer le document, ou je peux juste passer l'id du document et de le charger à nouveau dans chaque état (espérons-le, à partir d'un cache en ce moment), mais ces méthodes sont tellement maladroit et tout le reste sur angulaire et angulaire de l'interface utilisateur a été si bon.

Des suggestions?

OriginalL'auteur Riley Lark | 2013-11-17

  1. 11

    Pourrait être une des solutions pour passer à l'état parent, qui est disponible à tous les enfants. Quelque chose comme ceci:

    $stateProvider
.state('loading', {
    url: '/{documentId}',
    template: 'Loading...',
    controller: function ($scope, $stateParams, $state) {
        loadDocument($stateParams.documentId)
            .then(function (loadedDocument) {

                //assign the document to the parent model $scope
                //in this case $scope.model.doc  
                $scope.model = { "doc" : loadedDocument };
                if (loadedDocument.type === 'A') {
                    $state.go('.EditA');
                } else if (loadedDocument.type === 'B') {
                    $state.go('.EditB');
                }
            })
    }
})
.state('loading.EditA', {...}) //here we can use the $scope.model.doc
.state('loading.EditB', {...}) //in every child state

    La $scope.model.doc représente la référence au document partagé.

    Ici ( UI-Router exemple - contact.js ), nous pouvons voir comment le parent est le réglage des contacts de la collection, des enfants tous les membres y ont accès. Le exemple dans l'action

    Cela ressemble beaucoup - aussi, il semble que la volonté de hachage d'un parent de l'état peut être utilisé pour injecter des dépendances pour les enfants etats à la volée lorsque vous ne voulez pas ajouter des choses à $champ d'application. Merci!
    Ce montant de portée technique ne fonctionne que si les états-unis ont vues imbriquées, sinon, vous aurez besoin d'utiliser $rootScope.
    ui-router-exemple de lien est cassé...
    merci monsieur. Le lien est corrigé...

    OriginalL'auteur Radim Köhler

  2. 7

    Vous pourriez avoir un Documents service qui possède et fournit une API pour toutes les données du document. Les contrôleurs puis injecter le service des Documents, et le document de référence qu'ils sont intéressés à leur portée.

    Quelque chose comme:

    app.service('Documents', function(){
  Documents = {};

  return {
    open: function(doc_id) { ... }  //loads and caches doc (if not already cached) and returns a promise with a reference to Documents[doc_id]
    sync: function(doc_id) { ... }  //sync doc with server
    close: function(doc_id) { ... } //remove doc_id from Documents 
  };
});

app.controller('editX', function($scope, $stateParams, Documents){
  Documents.open($stateParams.documentId).then(function(ref){
    $scope.document = ref;
  });

  ...

})

    OriginalL'auteur Nat