Question

我正在使用＆＃39; ui.router＆＃39;和＆＃39; $ state.go＆＃39;重定向页面，

＆＃39;导航栏＆＃39;我的项目看起来像这样。

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

每个页面显示的表格首先包含项目列表。

让我们假设一种情况。

当我进入菜单时＃39;页面，我搜索一个关键字。

关注我的代码后，网址会发生变化，包括关键字。

例如，这就像

搜索前：

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

搜索后：

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

然后，我点击菜单＆＃39;选项卡＆＃39; navbar＆＃39;再次获得整个清单。

目前，我想使用触发器ui-sref或$(location)或其他内容更改网址。

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

但如果我点击浏览器后退按钮，则浏览器历史记录无法维护。

此外，我还使用了window.location.href，window.location.replace但结果相同。

在这种情况下，我如何保持历史？

我已准备好尝试各种建议！

PS 即可。

如果这还不够解释，请给我反馈。

实际上，我不知道如何更具体地解释这一点。：（

我已经在＆＃39; js＆＃39;中尝试了这个，而不是＆＃39;控制器＆＃39;。

我没有特别的理由在＆＃39; js＆＃39;。

我认为这可能更容易。

提前致谢！

更新

我可以通过点击导航栏上的每个标签来更改页面。

这可以使用ui-sref和完美。

我的主要问题是，例如，＆＃39; .active＆＃39;课程在＆＃39;菜单＆＃39;标签，

点击菜单＆＃39;再一次选项卡，ui-sref无效。

所以我在＆＃39; js＆＃39;中使用了$location，window或其他内容，

在此之后我得到的是＆＃39;删除了历史。

我想在点击“菜单”时将页面设置为初始化状态。标签如。

点击标签之前：

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

点击标签后：

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

还有一个，我手动将?page=1&offset=0&limit=10放入网址，

所以我只需触发ui-sref 或更改网址而不删除历史记录。

Answer 1

如果您使用的是Angular路由器，请不要使用window.location或$(location)来更改页面网址和位置。 Angular路由器有自己的机制，$state。

首先需要在控制器中注入$state，然后才能使用：

$state.go('yourStateHere');

这将保留所有跟踪浏览器中的历史记录。

注意：

确保您的状态在app.js中得到明确定义，我的意思是您需要为搜索所有搜索参数确定搜索参数的相应状态。

有关详细信息，请查看：

的 ui-router Quick Reference 即可。

的 StateProvider Reference 即可。

AngularJS Routing Using UI-Router tutorial。

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

更改URL而不删除Angularjs中的历史记录

2 个答案: