AngularJS ui-router résumé de l'état
J'ai récemment migré à partir de ngRoute ui-router. J'ai une page qui a 2 sections.
Section de droite affiche les détails de l'élément
Section de gauche montre les éléments similaires à l'élément courant.
Une fois que l'utilisateur clique sur un article similaire à celui de la liste à gauche, à droite recharger avec cliqué sur l'id de l'élément et de la section de gauche va rester de même.
De garder section de gauche encore sur l'utilisateur de l'élément de navigation, j'ai défini la gauche de la section comme un résumé de l'état et de la section à droite, comme c'est l'état d'enfant. (vous ne pouvez pas afficher les articles similaires si vous n'êtes pas à la recherche d'un élément).
Section de gauche (listview) est parent et contient une ui-view dans le code HTML à intégrer les détails de l'élément.
Pour charger des éléments similaires sur la page ouverte, j'ai besoin de savoir quel est l'élément chargé par mon état d'enfant. Mais je ne peux pas définir la même url pour à la fois abstraite de l'état et de l'état d'enfant.
j'ai essayé de résoudre $stateParams dans le résumé de l'état n'a aucune chance.
mon état de configuration ci-dessous
app.config(['$stateProvider', function ($stateProvider) {
$stateProvider
.state('item', {
//url: '/items/:itemName/:itemID'
url: '/items',
abstract: true,
templateUrl: 'Scripts/app/item/ItemListTemplate.html',
controller: 'ItemListController as itemList'
}).state('item.itemDetails', {
url: '/:itemName/:itemID',
templateUrl: 'Scripts/app/item/ItemDetailTemplate.html',
controller: 'ItemDetailController as itemDetail'
});
comment puis-je accéder à itemID à partir de mon résumé de l'état (à partir de ItemListController)?
- Essayez de changer
item
url/items/:itemName/:itemID
etitem.details
à/details
. Pour moi, la plus raisonnable.items
devrait être réservé pour/items
où vous afficher une liste et n'a rien à voir avec vue unique. Comme abstraite de l'état ne peut pas être initialisé, vous ne serez pas en mesure d'accéder à/items
route directement, ce qui tue un peu votre débit. Pour charger des articles similaires, les envelopper d'une directive et d'un accès$stateProvider.current
pour obtenir params & les données pour récupérer des objets similaires. Jetez un oeil à la section propriétés de l'ici -> angular-ui.github.io/ui-router/site/#/api/... - avec tous les paramètres parent résumé de l'état (article) page sera actualisée sur chaque article similaire sur. j'essaie de garder un élément similaire section mêmes, alors que le rechargement de détails
Vous devez vous connecter pour publier un commentaire.
j'ai résolu le problème en utilisant angulaire de portée variable. parent contient une interface utilisateur-pour afficher l'enfant de l'état de contenu. donc, l'enfant et le parent de l'état partagent la même portée, par conséquent, je peux aviser les parents de l'élément sélectionné id et le parent peut mettre à jour la vue.
état parent a un champ d'application de la fonction comme ceci
et de l'enfant de l'état peut appeler cette fonction à partir de son champ d'application
Je voudrais modèle de ce qu'un etat unique avec deux points de vue. Le sujet de votre état est un élément unique et les données connexes, de sorte que votre état devrait probablement tourner autour de cela. Vous avez décrit deux vues, l'une qui montre les détails de l'élément et un autre qui montre d'autres choses, mais le sujet principal est toujours le seul élément.
Dans votre vue parent, ajouter deux nommés ui-vues, où la vue est définie ci-dessus doit être branché dans:
Maintenant, vous pouvez améliorer à l'aide décide de précharger les données avant que le contrôleur est appelé: