web-dev-qa-db-fra.com

Comment utiliser ng-hide si $ location.url == base (racine)?

Je voudrais qu'un lien ← Retour à l'accueil apparaisse sous la navigation sur chaque page de mon application Angular, à l'exception de la page d'accueil. J'aimerais donc conditionnellement ajouter le lien et le masquer à l'aide de ng-hide si l'URL se trouve déjà sur la page d'accueil (vue) de l'application.

J'ai essayé d'utiliser le service $location de angular sans succès

<p ng-hide="location.hash == '#/'" class="container"><a href="#topics">&larr; Back to Home</a></p>

J'ai essayé les variantes suivantes:

ng-hide="location.hash == '#/' " //console.log shows true
ng-hide="location.hash === '#/' " //console.log shows true
ng-hide="location.hash == '' "    //console.log shows false

Je suis perplexe, car si je consigne la valeur de location.hash == '#/' lorsque je reçois true sur la page d’accueil, le ng-hide devrait donc fonctionner.

Fondamentalement, j'essaye la 3ème approche listée ici: Comment utiliser ng-hide angulaire en fonction de la page/route sur laquelle je suis actuellement? Mais ça ne marche pas. Les deux autres approches sur cette page semblent trop compliquées pour ce que j'essaie de réaliser.

Qu'est-ce que je rate?

angularjsng-showng-hide
10
Tyler

Tout d’abord, lorsque vous utilisez location.hash ou location.url, vous utilisez en fait l’objet javascript window.location, vous devez utiliser le service $ location fourni par angular. Ainsi, dans votre contrôleur, je créerais:

$scope.currentPath = $location.path();

Et dans votre html:

<div ng-hide="currentPath === '/'"></div>

Bien que je sois attentif aux "# /" et "/", je n’utilise que le mode html5, je ne suis donc pas sûr de ce que $ location.path retournera, mais vous pouvez facilement le vérifier avec un fichier console.log ($ location .path ()) Bien que je pense qu’il ne retournera que "/" car c’est le chemin pour angular, il ne devrait pas se soucier du #.

19
Adrian Neatu

Angular recherche une variable $scope appelée location. Si vous voulez que cela fonctionne, vous devrez faire:

$scope.location = window.location

dans votre contrôleur. Mais alors vous devriez vraiment injecter $location et définir $scope.location = $location

0
dave