AngularJS $endroit qui n'est pas mis à jour correctement lors de l'utilisation de $routeProvider
-
20-12-2019 - |
Question
J'ai un Angular JS application avec un defaultController
qui contrôle l'en-tête de l'application.Puis j'ai d'autres contrôleurs de un pour chaque vue.Les vues sont chargés dans le <main>
.Je charge le point de vue à l'aide de la $routeProvider
avec ce code:
myapp.config(['$routeProvider',
function($routeProvider) {
$routeProvider.
when('/login', {
templateUrl: 'templates/login.html',
controller: 'loginController'
}).
when('/dashboard', {
templateUrl: 'templates/dashboard.html',
controller: 'dashboardController'
}).
...
J'essaie d'afficher un bouton de DÉCONNEXION à l'intérieur de l'en-tête lorsque le chargé de vue est le tableau de bord et de le cacher si le chargé de vue est la vue login.Dans ce but que j'ai sur le defaultController
l' $location
objet et j'ai bien ajouter et supprimer des classes à partir du bouton de DÉCONNEXION avec ng-class
.
Il n'y a qu'un seul problème:$emplacement me donne le chemin d'accès correct la première fois que je charge la page, mais après j'ai changer la vue (modifié par la $routeProvider
) cette variable n'est pas plus mis à jour, donc quand je suis sur /#/dashboard
le $location.url
est encore sur /login
.Voici le code du contrôleur:
controllers.controller('defaultController', ['$scope', 'ipCookie', '$location', function($scope, ipCookie, $location) {
$scope.url = $location.url();
...
J'ai aussi essayé avec $window.location.hash
avec le même résultat.
Une idée?
EDIT:après avoir accepté la réponse c'est ce que j'ai ajouté sur le defaultController
pour le faire fonctionner
$scope.$on("$locationChangeSuccess", function() {
$scope.url = $location.url();
});
La solution
L'emplacement est probablement mis à jour dans le service après votre contrôleur par défaut est chargé.
Vous pouvez injecter de l' $location
service dans le champ d'application et de prendre des décisions en votre modèle basé sur celui-ci (alors il sera automatiquement regardé et re-évalué) ou vous pouvez écouter de la $locationChangeSuccess
de l'événement.
Lors de l'injection, vous pouvez simplement $scope.location = $location
et puis utiliser quelque chose comme <a ng-hide="location.path() != '/something'">
.
$location
les émissions de la $locationChangeSuccess
sur la racine de la portée, de sorte que vous devriez être en mesure d'écouter ce quelle que soit la portée, vous avez à disposition: $scope.$on( "$locationChangeSuccess", function() { /* do something */ } );