AngularJS – Multiple ng-view dans un modèle unique

Je construis une application Web dynamic en utilisant AngularJS. Est-il possible d’avoir plusieurs ng-view sur un seul modèle?

Vous ne pouvez avoir qu’une seule 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.

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

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

Vérifiez la documentation de plusieurs vues nommées ici .

Je crois que vous pouvez y arriver en ayant simplement une vue unique. Dans le modèle principal, vous pouvez avoir ng-include sections ng-include pour les sous-vues, puis dans le contrôleur principal, définir les propriétés du modèle pour chaque sous-modèle. Pour qu’ils se lient automatiquement aux sections ng-include . C’est comme avoir plusieurs ng-view

Vous pouvez vérifier l’exemple donné dans la documentation ng-include

Dans l’exemple, lorsque vous modifiez le modèle à partir de la liste déroulante, il modifie le contenu. Supposons que vous ayez une ng-view principale et que, au lieu de sélectionner manuellement le sous-contenu en sélectionnant la liste déroulante, vous le faites comme lorsque la vue principale est chargée.

En utilisant le module régulier ng-view vous ne pouvez pas avoir plus d’un modèle dynamic.

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

Il est possible d’avoir des vues multiples ou nestedes. Mais pas par ng-view.

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

   home 
header
content
footer

Vous devez référencer angularjs et angular-ui.router pour cet exemple.

 $ bower install angular-ui-router 

Vous ne pouvez pas avoir plusieurs ng-view. Voici mon cas d’utilisation où j’ai résolu mon besoin. Je voulais avoir un comportement par tabs dans mon dialog de modèle. J’étais confronté à un problème, car cliquez sur les tabs ayant un lien hypertexte qui invoqueront les liens de routeur. J’ai résolu ce problème en utilisant le bouton et css pour les tabs. Lorsque l’utilisateur clique sur l’onglet, il n’appelle en fait aucun lien hypertexte qui invoquera toujours le routeur ng. Lorsque l’utilisateur clique sur l’onglet, il appelle une méthode, où je charge dynamicment html. Ci-dessous la fonction sur un clic de tabulation

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

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