Activer / désactiver la visibilité d'un ng-inclure la fonction sur la route
J'ai la configuration suivante:
$routeProvider
.when('/cars', { templateUrl: 'app/cars/index.html', controller: 'CarsCtrl', reloadOnSearch: false })
.when('/bikes', { templateUrl: 'app/bikes/index.html', controller: 'BikesCtrl', reloadOnSearch: false });
et quelque part dans ma racine index.html il y a un:
<a href="#/cars">Cars</a>
<a href="#/bikes">Bikes</a>
<div ng-view></div>
Maintenant, je veux les deux points de vue chargé et a généré dans les DOM, dans le même temps, et de montrer l'un d'eux en fonction de l'itinéraire/URL.
Quelque chose comme ce qui suit (pas de code de travail effectif, juste pour vous donner une idée).
app.js:
$routeProvider
.when('/cars', { controller: 'CarsCtrl', reloadOnSearch: false })
.when('/bikes', { controller: 'BikesCtrl', reloadOnSearch: false });
racine index.html:
<a href="#/cars">Cars</a>
<a href="#/bikes">Bikes</a>
<div ng-include="'app/cars/index.html'" ng-show="carsVisible"></div>
<div ng-include="'app/bikes/index.html'" ng-show="bikesVisible"></div>
Mise à JOUR: je sais que ng-view genre de fait cela, mais la différence, si subtile, existe. Je veux le code html de chaque point de vue à être généré à la fois et de séjour dans les DOM, à tout moment.
Il n'est pas possible de réaliser cela avec ng-view. Mais la question est, pourquoi voudriez-vous vraiment envie de le faire. Est-ce parce que vous souhaitez "prétraitement" chaque itinéraire afin qu'il se charge plus vite? Le routage est déjà assez rapide, à moins que votre contrôleurs exiger certains asynchrone de données, auquel cas vous pouvez utiliser 'résoudre' à l'intérieur de la définition de la route de l'objet, en plus de certains d'application du code d'initialisation pour la récupération asynchrone des données en arrière-plan.
OriginalL'auteur luisfarzati | 2013-02-28
Vous devez vous connecter pour publier un commentaire.
J'ai créé un seul RouteCtrl à charger tous vos points de vue via ng-include. ng-view n'est pas utilisé. J'ai incorporé les modèles. Les modèles pourraient contenir leurs propres ng-controller directives de tirer dans des contrôleurs spécifiques.
$routeProvider est toujours configuré, mais pas de modèle ou de contrôleur est spécifié, causant la RouteCtrl d'être toujours actif. Ce contrôleur est à l'écoute de la
$routeChangeSuccess
événement et manipule le ng-show propriétés en conséquence.Plunker
L'idée de cette solution est de @Andy.
OriginalL'auteur Mark Rajcok
J'ai trouvé une autre façon, je pense que c'est le plus simple, le plus rapide et le plus facile à gérer:
Comment définir bootstrap barre de navigation active de la classe avec Angular JS?
Qui est:
Utilisation ng-controller pour exécuter une seule commande à l'extérieur de la ng-vue:
et de l'inclure dans controllers.js:
OriginalL'auteur Zymotik
Au lieu d'utiliser
ng-include
, vous devez utiliserng-view
;Cela permet d'afficher le contenu de
app/cars/index.html
ouapp/bikes/index.html
Voir le Modèle section de http://docs.angularjs.org/tutorial/step_07
où/quand avez-vous changer
carsVisible
etbikesVisible
, et vous avez un contrôleur de quelque part dans la racineindex.html
?OriginalL'auteur Pascal Belloncle
Utiliser un service avec un spectacle de la directive:
Service:
App.js:
OriginalL'auteur Zymotik