angular.js - angularjs ui-router 动态切换视图到指定的ui-view中

Question

a.html

<p ui-view='index'></p>

b.html

<p ui-view='content'></p>

c.html

<p>content1</p>

d.html

<p>content2</p>

a.html中绑定事件触发content视图切换到c.html或d.html

$stateProvider的config应该怎么配置
js里如果手动做切换？

Answer 1

Votre question manque de certaines informations contextuelles nécessaires, je ne peux donc me fier qu'à des spéculations ou à des suppositions pour la compléter

Le système de routage de n'importe quel framework SPA est le même : chaque route correspond au statut de l'application, et les changements de statut de l'application se reflètent dans les changements d'URL, à l'inverse, les changements d'URL entraîneront des changements dynamiques dans le système de routage Actualiser l'état de l'application.

Dans votre exemple, il n'y a qu'une seule entrée constante dans l'itinéraire, ui-view='content', mais différentes vues (c.html et d.html) doivent y entrer dynamiquement, ce qui signifie c.html et d.html Pour correspondre aux différents états de l'application, le système de routage peut être mis à jour dynamiquement en conséquence.

Supposons que votre exemple ressemble à ceci :

• Quand /posts/show/c, ui-view='content' affiche c.html

• Quand /posts/show/d, ui-view='content' affiche d.html

Nous pouvons donc le mapper sur ui-router :

• state est posts.show

Le

• fragment dynamique, c'est-à-dire la partie variable des URL, correspond au state dans url, je l'ai nommé :name

L'entrée de

• view est content@posts.show

Cela suffit pour écrire la majeure partie du code :

angular.module('YourApp').config(function ($stateProvider) {

    $stateProvider.state('posts.show', {
        url: '/show/:name',
        views: {
            'content@posts.show': {
                templateUrl: /* TODO */,
                controller: ...
            }
        }
    });

});

La seule question qui reste est : comment mettre à jour :name lorsque templateUrl change ?

Comme mentionné précédemment, les modifications des URL entraîneront la mise à jour de l'état de l'application par le système de routage. Ces modifications sont enregistrées dans l'objet $params du système de routage. Nous pouvons utiliser cet objet pour extraire les parties modifiées et générer. le bon templateUrl 🎜>. Ici, j'écris une fonction d'assistance pour ce faire :

angular.module('YourApp').config(function ($stateProvider) {

    $stateProvider.state('posts.show', {
        url: '/show/:name',
        views: {
            'content@posts.show': {
                templateUrl: getTemplateUrl,
                controller: ...
            }
        }
    });

    function getTemplateUrl() {
        return: 'templates/posts/' + $params.name + '.html';
    }

});

module ui-router, templateUrl reçoit non seulement des chaînes, mais aussi la valeur de retour des fonctions. Vous pouvez donc obtenir :

• Quand /posts/show/c, templateUrl est templates/posts/c.html

• Quand /posts/show/d, templateUrl est templates/posts/d.html

En conséquence, le lien de navigation dans votre index est responsable de la commutation des modifications de /posts/show/:name. Comment générer le lien correspondant au fragment dynamique se trouve dans la documentation de l'interface utilisateur.

Answer 2

Je pense que les personnes ci-dessus rendent le jeu trop compliqué. Ne serait-il pas bien de simplement regarder un tutoriel d'interface utilisateur
https://scotch.io/tutorials/a...