更改URL而不刪除Angularjs中的歷史記錄

Question

我正在使用'ui.router'和'$ state.go'重定向頁面，

我項目的'navbar'看起來像這樣。

<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>

每個頁面顯示表格，其中首先包含項目列表。

讓我們假設一個情況。

當我在“菜單”頁面時，我會搜索關鍵字。

按照我的代碼，URL更改包括關鍵字。

例如，這就像

在搜索之前 ：

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

搜索后 ：

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

。

。

然后，點擊“導航欄”中的“菜單”標簽，再次獲取整個列表。

這時，我想使用觸發器ui-sref或$(location)來更改URL。

使用$(location).attr('href', url) ，成功更改URL

但如果我點擊瀏覽器后退按鈕，則瀏覽器歷史記錄無法維護。

而且我也使用了window.location.href ， window.location.replace但結果相同。

在這種情況下，我如何保持歷史？

我已准備好嘗試各種建議！

。

。

PS 。

如果這還不夠解釋，請給我反饋。

實際上，我不知道如何更具體地解釋這一點。 :(

我在'js'中試過這個，而不是'控制器'。

沒有特別的理由我在'js'中做過這個。

只是我認為這可能更簡單。

提前致謝！

。

。

UPDATE

我可以通過點擊“導航欄”上的每個標簽來更改頁面。

這適用於使用ui-sref和完美。

我的主要問題是，例如，'。active'類位於'menu'選項卡中，

再次單擊“菜單”選項卡， ui-sref無效。

所以我在'js'中使用了$location ， window或者其他東西，

在此之后，我得到的是“刪除歷史” 。

當我點擊“菜單”標簽時，我想讓頁面處於初始化狀態。

點擊標簽之前 ：

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

點擊標簽后 ：

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

還有一個，我手動將URL ?page=1&offset=0&limit=10放入URL中，

所以我只需要觸發ui-sref或更改URL而不刪除歷史記錄。

Answer 1

好吧，如果您使用的是Angular路由器，請不要使用window.location或$(location)來更改頁面URL和位置。 Angular路由器有自己的機制，即$state 。

你需要先在你的控制器中注入$state然后你可以使用：

$state.go('yourStateHere');

這將使您在瀏覽器中跟蹤所有歷史記錄。

注意：

確保你的app.js中的狀態定義良好，我的意思是你需要為serach頁面定義一個相應的狀態，考慮所有的搜索參數。

有關詳細信息，請查看：

• ui-router快速參考 。
• StateProvider參考 。
• AngularJS路由使用UI-Router教程 。

Answer 2

您是否嘗試使用角度服務$location ？ 例如：

$location.path("/main_page");

然后你可能需要使用$scope.$applyAsync();

更新 （以下評論后）

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];
        }
    }
}]);

例：

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