Affichage hachage dans l'URL en utilisant location.replace (hachage)

Question

Tech Stack

AngularJS v1.2.28 - ne peut pas changer cette

angulaire Brochure Directive

Brochure-beta.2

1.0.0

Esri Brochure v2.0.0-beta.6

Intro

J'ai rencontré des problèmes. J'essaie d'utiliser leaflet-hash.js pour permettre aux utilisateurs de partager leur position avec les autres. Le problème est que je peux obtenir le hachage à apparaître dans l'URL si je change location.replace(hash). Mais quelques problèmes se produisent en fonction de ce que je le change. Ci-dessous, je décris ce que j'essaie de réaliser et ce que j'ai déjà essayé et le résultat.

Comportement souhaité

L'utilisateur doit être en mesure d'accéder à la page de carte de 4 façons:

1. Entrez une adresse sur la page d'accueil et cliquez sur le bouton de recherche.
2. Cliquez sur un nom de comté sur la page d'accueil. Entrez un URL avec les coordonnées de la carte (par exemple http://www.myapp.com/map#10/39.4378/-76.5841)
3. Entrez l'URL de la page de carte sans les coordonnées (par exemple, http://www.myapp.com/map).

L'utilisateur devrait également pouvoir zoomer/se déplacer sur la page de carte et les coordonnées changeront dans le hash de l'URL.

Si l'utilisateur saisit uniquement l'URL de la carte générique (http://www.myapp.com/map), il passe automatiquement au niveau de zoom de l'état (http://www.myapp.com/map#8/38.903/-76.776).

Le problème

Mon problème ne concerne que les numéros 3 et 4 ci-dessus. En utilisant le plugin tel quel, je suis redirigé vers la page d'accueil, quelle que soit la méthode que j'utilise.Je crois que ce morceau de code est le coupable:

location.replace(hash);

Si je change à:

location.hash = hash;

le hachage apparaît dans l'URL, mais je reçois l'erreur suivante et page constante rafraîchissante lorsque je tente d'accéder à la page de la carte en utilisant la méthode 4:

[$rootScope:infdig] 10 $digest() iterations reached. Aborting!

Si je change la ligne:

location.hash.replace(hash);

Je ne vais pas obtenir l'erreur digest ou la page constante rafraîchissante, mais le hachage est pas dans l'URL comme il devrait être (par exemple http://www.myapp.com/map au lieu de http://www.myapp.com/map#10/39.4378/-76.5841)

Cela se produit, que j'utilise la méthode d'accès 3 ou 4.

Mon code

Sur charge carte Je vérifie la présence de # puis déterminer, si tout, la géométrie, je dois aussi exposerons:

leafletData.getMap("map").then(function(map) { 
    $scope.map = map; 
    var hash = new L.Hash($scope.map); 
    var checkLocation = window.location.href; 
    //No # in URL 
    if (checkLocation.indexOf("#") <= 0) { 
     if (searchResults.geojson) { 
      // dealing w/ polygon 
      // CODE TO DISPLAY POLYGON 
     } else if (searchResults.latlng) { 
      // dealing w/ point 
      // CODE TO DISPLAY POINT 
     } else { 
      // no geometry so go with default view 
      // CODE TO DISPLAY DEFAULT VIEW 
     } 
    } 
    // # in URL 
    else { 
     var url = decodeURIComponent(window.location.href); 
     if (searchResults.geojson) { 
      // dealing w/ polygon 
      // CODE TO DISPLAY POLYGON 
     } else if (searchResults.latlng) { 
      // dealing w/ point 
      // CODE TO DISPLAY POINT 
     } else { 
      // no geometry so go with default view 
      var n = url.lastIndexOf('#'); 
      var hashOnly = url.substring(n); 
      var mapView = parseUrlHash(hashOnly); 
      console.log(mapView); 
      $scope.map.setView([mapView.lat, mapView.lng], mapView.zoom); 
     } 

    } 

}); 

Brochure Hash Plugin code

J'ai seulement posté la partie que je pense est pertinente avec mes commentaires. Le code complet se trouve ici: leaflet-hash.js

onMapMove: function() { 

    // bail if we're moving the map (updating from a hash), 
    // or if the map is not yet loaded 

    if (this.movingMap || !this.map._loaded) { 
     return false; 
    } 

    var hash = this.formatHash(this.map); 
    hash = decodeURIComponent(hash); 
    if (this.lastHash != hash) { 
     //[A] Original code 
     // Automatically redirects you back to the home page 
     //location.replace(hash); 

     //[B] Suggestion from GitHub 
     //https://github.com/mlevans/leaflet-hash/issues/45 
     // Shows hash in URL but causes this: Error: [$rootScope:infdig] 10 $digest() iterations reached. Aborting! 
     // and constant page refreshing when trying to access map page using method 4. 
     location.hash = hash; 

     //[C] Fixes errors in [B] but hash does not appear in the URL 
     // I need it to be in the URL so users can share location 
     //location.hash.replace(); 

     //[D] Same as [C] 
     //location.hash.replace(hash); 

     this.lastHash = hash; 

    } 
}, 

Je ne sais pas où je vais mal. Je pensais que le problème pourrait être dans le plugin mais peut-être mon code est ce qui le cause?

MISE À JOUR

Dans app.js J'ai $locationProvider.html5Mode(true);. Cela pourrait-il causer un conflit?

Answer 1

peut-être

var curHash = location.hash?location.hash.substring(1); 
if (hash!=curHash) location.replace(
    curHash?location.href.split("#")[0]+"#"+hash:location.href+"#"+hash 
);