Modifier l'URL sans supprimer l'historique dans Angularjs

Question

J'utilise 'ui.router' et '$state.go' pour rediriger la page,

La "navbar" de mon projet ressemble à ceci.

<ul class="sidebar-menu">
    <li class="active">
        <a ui-sref="root.menu({brand_id:nav.brand_id})">
            <i class="fa fa-building-o"></i>
            <span> {{nav.navInfo.menu.auth_name}}</span>
        </a>
    </li>
    <li>
        <a ui-sref="root.picture({brand_id:nav.brand_id})">
            <i class="fa fa-book"></i>
            <span> {{nav.navInfo.picture.auth_name}}</span>
        </a>
    </li>
    ...
</ul>

Chaque page présente un tableau qui contient la liste des articles en premier.

Supposons une situation.

Quand je suis dans la page 'menu', je cherche un mot clé.

En suivant mon code, l'URL change en incluant le mot clé.

Par exemple, cela fonctionne comme suit

Avant de chercher :

/menu?page=1&offset=0&limit=10

Après avoir cherché :

/menu?page=1&offset=0&limit=10&searchKey=menu_name&searchString=pizza

.

.

Ensuite, je clique sur l'onglet "menu" de la "barre de navigation" pour obtenir à nouveau la liste complète.

À ce moment-là, je voulais changer l'URL en utilisant le déclencheur ui-sref o $(location) ou quelque chose comme ça.

Lorsque vous utilisez $(location).attr('href', url) le changement d'URL a été effectué avec succès

mais si je clique sur le bouton retour du navigateur, l'historique du navigateur n'est pas maintenu.

Et j'ai aussi utilisé window.location.href , window.location.replace mais même résultat.

Comment puis-je conserver l'historique dans ce cas ?

Je suis prêt à essayer toutes vos suggestions !

.

.

PS .

Si cette explication n'est pas suffisante, veuillez me faire part de vos commentaires.

En fait, je n'ai aucune idée de comment expliquer cela plus précisément :(

Et j'ai essayé dans 'js', pas dans 'controller'.

Il n'y a pas de raison particulière pour laquelle j'ai fait ça dans 'js'.

J'ai juste pensé que ce serait plus facile.

Merci d'avance !

.

.

UPDATE

Je peux changer de page en cliquant sur chaque onglet de la 'navbar'.

Cela fonctionne en utilisant ui-sref et parfait.

Mon principal problème est que, par exemple, la classe '.active' se trouve dans l'onglet 'menu',

cliquez une nouvelle fois sur l'onglet "menu", ui-sref n'a pas fonctionné.

J'ai donc utilisé $location , window ou quelque chose dans 'js',

après ça, ce que j'ai eu c'est L'histoire supprimée .

Je veux que la page soit initialisée lorsque je clique sur l'onglet 'menu'.

Onglet "Avant de cliquer :

/menu?page=1&offset=0&limit=10&searchKey=menu_name&searchString=pizza

Après avoir cliqué sur l'onglet :

/menu?page=1&offset=0&limit=10

Un de plus, je mets ?page=1&offset=0&limit=10 dans l'URL manuellement,

donc ce que je dois faire c'est tir ui-sref o changer l'URL sans supprimer l'historique.

Answer 1

Eh bien, si vous utilisez des routeurs Angular, n'utilisez pas window.location o $(location) pour modifier l'url et l'emplacement de la page. Le routeur Angular a son propre mécanisme pour faire cela, qui est $state .

Vous devez d'abord injecter $state dans votre contrôleur alors vous pouvez l'utiliser :

$state.go('yourStateHere');

Cela permettra de conserver tout le suivi de l'historique dans votre navigateur.

Nota:

Veillez à ce que vos états soient bien définis dans vos app.js Je veux dire que vous devez définir un état respectif pour la page de recherche en tenant compte de tous les paramètres de recherche.

Pour plus de détails, vous pouvez vérifier :

• ui-router Quick Reference .
• Référence StateProvider .
• Routage AngularJS avec UI-Router tutorial .

Answer 2

Avez-vous essayé d'utiliser le service angulaire $location ? par exemple :

$location.path("/main_page");

Dans ce cas, vous devez peut-être utiliser $scope.$applyAsync();

Mise à jour (après les commentaires ci-dessous)

services.service("$way", ["$location", function ($location) {
    var self = this;
    var lastBack;            //last page where you was
    this.way = new Array();
    var LIMIT_LENGTH = 30;   //limit of route history
    var curScope = null;     //current scope
    var active = true;       //is service active

    this.step = function (path, $scope) {
        curScope = $scope;
        if (lastBack != path) {
            lastBack = null;
            this.way.push(path);
            if (this.way.length > LIMIT_LENGTH) {
                this.way.shift();
            }

        }
    }

    this.goBack = function () {
        if (active) {
            var path = back();
            lastBack = path;
            if (path != "/") {
                $location.path(path);
                curScope.$applyAsync();
            }
        }
    }

    this.setActive = function (_active) {
        active = _active;
    }

    this.refresh = function () {
        this.way = new Array();
    }

    function back() {
        if (self.way.length > 1) {
            self.way.pop();
            Log.o("WAY_BACK", self.way);
            return self.way[self.way.length - 1];
        }
    }
}]);

Ejemplo:

$way.step("/blog", $scope);  //add page to path
$way.step("/main", $scope);  //add page to path
$way.goBack(); // now you on /blog page