web-dev-qa-db-fra.com

AngularJS - Vue multiple dans un seul modèle

Je construis une application Web dynamique en utilisant AngularJS. Est-il possible d'avoir plusieurs ng-view sur un même modèle?

angularjsng-view
129
Jayram Singh

Vous pouvez avoir juste un ng-view. 

Vous pouvez modifier son contenu de plusieurs manières: ng-include , ng-switch ou mapper différents contrôleurs et modèles via routeProvider. 

95
pasine

UI-Router est un projet qui peut vous aider: https://github.com/angular-ui/ui-router L'une de ses fonctionnalités est Plusieurs vues nommées

UI-Router a de nombreuses fonctionnalités et je vous recommande de l'utiliser si vous travaillez sur une application avancée.

Consultez la documentation de plusieurs vues nommées ici .

39
Morteza Ziaeemehr

Je crois que vous pouvez y arriver simplement en ayant un seul ng-view. Dans le modèle principal, vous pouvez avoir des sections ng-include pour les sous-vues, puis dans le contrôleur principal, définissez les propriétés du modèle pour chaque sous-modèle. Pour qu'ils se lient automatiquement aux sections ng-include. Cela revient à avoir plusieurs ng-view 

Vous pouvez consulter l'exemple donné dans ng-includedocumentation

dans l'exemple, lorsque vous modifiez le modèle à partir de la liste déroulante, le contenu est modifié. Supposons ici que vous avez un ng-view principal et qu'au lieu de sélectionner manuellement le contenu secondaire en sélectionnant la liste déroulante, vous le faites comme lorsque la vue principale est chargée.

16
Tekz

En utilisant le module ng-view standard, vous ne pouvez pas avoir plus d’un modèle dynamique.

Cependant, ce projet vous permet de le faire (recherchez ui-router).

13
ŁukaszBachman

Il est possible d'avoir plusieurs vues ou des vues imbriquées. Mais pas par ng-view. 

Le module de routage principal dans angular ne prend pas en charge les vues multiples . Mais vous pouvez utiliser ui-router. Ceci est un module tiers que vous pouvez obtenir via Github, angular-ui/ui-router, https://github.com/angular-ui/ui-router . Une nouvelle version de ngRouter (ngNewRouter) est en cours de développement. Il n'est pas stable pour le moment . Je vous fournis donc un exemple de démarrage simple avec ui-router . En l'utilisant, vous pouvez nommer les vues et spécifier les modèles et les contrôleurs à utiliser pour les rendre. En utilisant $ stateProvider, vous devez spécifier la manière dont les espaces réservés de la vue doivent être rendus pour un état spécifique.

<body ng-app="main">
    <script type="text/javascript">
    angular.module('main', ['ui.router'])
    .config(['$locationProvider', '$stateProvider', function ($locationProvider, $stateProvider) {
        $stateProvider
        .state('home', {
            url: '/',
            views: {
                'header': {
                    templateUrl: '/app/header.html'
                },
                'content': {
                    templateUrl: '/app/content.html'
                }
            }
        });
    }]);
    </script>
    <a ui-sref="home">home</a>
    <div ui-view="header">header</div>
    <div ui-view="content">content</div>
    <div ui-view="bottom">footer</div>
    <script src="bower_components/angular/angular.js"></script>
    <script src="bower_components/angular-ui-router/release/angular-ui-router.js">
</body>

Vous avez besoin de référencement angularjs et angular-ui.router pour cet exemple.

$ bower install angular-ui-router
8
Farshid Saberi

Vous ne pouvez pas avoir plusieurs vues. Ci-dessous, mon cas d'utilisation où j'ai résolu mon exigence .. Je voulais avoir un comportement avec onglets dans la boîte de dialogue de modèle. Je faisais face au problème en cliquant sur les onglets ayant un lien hypertexte qui invoquera des liens de routeur. J'ai résolu ceci en utilisant button et css pour les onglets. Lorsque l'utilisateur clique sur l'onglet, il n'appelle en réalité aucun hyperlien qui invoquera toujours le routeur ng. Lorsque l'utilisateur clique sur l'onglet, il appelle une méthode, où je charge dynamcilly du code HTML. Ci-dessous, la fonction sur clic de l'onglet

self.submit = function(form) {
                $templateRequest('resources/items/employee/test_template.html').then(function(template){
                var compiledeHTML = $compile(template)($scope);
                $("#d").replaceWith(compiledeHTML);
});

Utilisateur $ templateRequest. Dans la page test_template.html, ajoutez votre contenu HTML. Ce contenu HTML sera lié à votre contrôleur.

0
Aslam anwer