web-dev-qa-db-fra.com

comment puis-je transmettre des données personnalisées à un état à partir d'une vue dans ui-router?

J'utilise $stateProvider pour ma configuration d'itinéraire. Je voulais profiter des données personnalisées qu'ils fournissent pour transmettre certaines données personnalisées d'une page partielle à l'autre (le ng-click).

C'est le meilleur que j'ai obtenu jusqu'à présent:

Attacher des données personnalisées aux objets d'état

Vous pouvez attacher des données personnalisées à l'objet d'état (nous vous recommandons d'utiliser une propriété de données pour éviter les conflits).

// Example shows an object-based state and a string-based state 
var contacts = { 
    name: 'contacts',
    templateUrl: 'contacts.html',
    data: {
        customData1: 5,
        customData2: "blue"
    }
} 
$stateProvider
    .state(contacts)
    .state('contacts.list', {
        templateUrl: 'contacts.list.html',
        data: {
            customData1: 44,
            customData2: "red"
        }
    })

Avec l'exemple ci-dessus, vous pouvez accéder aux données comme ceci:

function Ctrl($state){
     console.log($state.current.data.customData1) // outputs 5;
     console.log($state.current.data.customData2) // outputs "blue";
 }

Source

Supposons que j'ai un autre état appelé clients avec son propre modèle et contrôleur. Comment puis-je modifier la valeur de l'objet de données d'état des contacts dans le contrôleur/la vue des clients? c'est-à-dire: je veux changer de ceci:

data: {
    customData1: 44,
    customData2: "red"
}

pour ça:

data: {
    customData1: 100,
    customData2: "green"
}

Tout pointeur ou échantillon sera apprécié!

Révisé - Je l'ai fait fonctionner par moi-même et voici comment:. sur un contrôleur (par exemple: customerCtrl), vous pouvez obtenir l'état du contact par son nom et le faire la modification souhaitée, telle que la mise à jour de la valeur de propriété de l'objet de données personnalisé, comme suit:

 //get the state by name and change the value of custom data property

 $state.get('contacts').data.customData1= 100;
 $state.go('contacts'); // then you can make a go to that state.
angularjsangular-ui-routerstate
22
user3818435

Je l'ai fait fonctionner par moi-même et voici comment. Sur un contrôleur (par exemple: customerCtrl), vous pouvez obtenir l'état du contact par son nom ( https://github.com/angular-ui/ui-router/wiki/Quick-Reference#statename et rechercher $ state.get ([stateName]))
Une fois que vous obtenez l'état, vous pouvez effectuer la modification souhaitée, comme la mise à jour de la valeur de propriété de l'objet de données personnalisé comme suit:

//get the state by name and change the value of custom data property 
 $state.get('contacts').data.customData1= 100;
  // then you can go to that state.
 $state.go('contacts');

J'espère que cela aidera quelqu'un.

26
user3818435

Si vous essayez de lire des données personnalisées pour l'état actuel, vous pouvez facilement les lire comme $state.current.data.customData1 = 100;

11
Chandramuralis