comportement des liens angular.js - désactivation des liens profonds pour des URL spécifiques

Question

J'ai une application Angular.js fonctionnelle avec le mode HTML5 activé.

$location.Html5mode(true).hashbang("!");

Ce que je veux faire, c'est obtenir des URLs ou des <a> pour adopter le comportement normal de navigation au lieu de modifier l'URL dans la barre d'adresse à l'aide de l'API historique HTML5 et de la gérer à l'aide des contrôleurs Angular.

J'ai ces liens :

<a href="stackoverflow.com/auth/facebook'>Sign in with Facebook</a>
<a href="stackoverflow.com/auth/twitter'>Sign in with Twitter</a>
<a href="stackoverflow.com/auth/...'>Sign in with ...</a>

Et je veux que le navigateur redirige l'utilisateur vers /auth/... l'utilisateur sera alors redirigé vers un service d'authentification.

Y a-t-il un moyen de le faire ?

Answer 1

Ajout de target="_self" fonctionne dans Angular 1.0.1 :

<a target="_self" href='http://stackoverflow.com/auth/facebook'>Sign in with Facebook</a>

Cette fonctionnalité est documentée ( https://docs.angularjs.org/guide/$location - recherche de '_self')

Si vous êtes curieux, regardez la source angulaire (ligne 5365 @ v1.0.1). Le détournement du clic ne se produit que si !elm.attr('target') est vrai.

Answer 2

Voici le code permettant de désactiver complètement la liaison profonde. Il désactive le gestionnaire d'événement de clic de l'élément racine.

angular.module('myApp', [])
   .run(['$location', '$rootElement', function ($location, $rootElement) {
      $rootElement.off('click');
}]);

Answer 3

Pour travailler à partir de la réponse de Nik, si vous avez beaucoup de liens et que vous ne voulez pas ajouter des cibles à chacun d'entre eux, vous pouvez utiliser une directive :

Module.directive('a', function () {
    return {
        restrict: 'E',
        link: function(scope, element, attrs) {
            element.attr("target", "_self");
        }
    };
});

Answer 4

J'ai rencontré le même problème plusieurs fois avec angular, et bien que j'aie trouvé deux solutions fonctionnelles, les deux ressemblent à des bidouillages et ne sont pas très "angular".

Hack #1 :

Lier un window.location rafraîchir le lien click événement.

<a 
  href=/external/link.html 
  onclick="window.location = 'http://example.com/external/link.html';"
>

Les inconvénients et les problèmes de cette approche sont assez évidents.

Hack #2

Configuration d'Angular $route qui effectuent un $window.location changement.

// Route
.when('/external', {
  templateUrl: 'path/to/dummy/template', 
  controller: 'external'
})

// Controller
.controller('external', ['$window', function ($window) {
  $window.location = 'http://www.google.com';
}])

J'imagine que l'on peut étendre ce système en utilisant $routeParams ou des chaînes d'interrogation pour qu'un seul contrôleur gère tous les liens "externes".

Comme je l'ai dit, aucune de ces solutions n'est très satisfaisante, mais si vous devez faire fonctionner ce système à court terme, elles pourraient vous aider.

En passant, j'aimerais vraiment voir Angular supporter rel=external pour ce type de fonctionnalité, tout comme jQueryMobile l'utilise pour désactiver le chargement de page par ajax.

Answer 5

Dans vos itinéraires, essayez :

$routeProvider.otherwise({})