浏览器历史记录返回后未绑定的数据

Data not binded after browser history back

本文关键字：绑定 数据 历史 记录 返回 浏览器      更新时间：2023-09-26

我确实有一个基于jHipster模板和浏览器后退按钮问题的网页。

假设我有两页

  • 物品列表(/articles/{id},{name}，类别id，类别名称)
  • 商品详情(/article/{id}，商品id)

文章列表页面显示在范围内设置的类别名称:

js: 

$scope.name = $stateParams.name;
html: 

<div>{{ name }}</div>
<ul>
<li ng-repeat="item in items">
    <a ui-sref="article({id: item.id})">{{ item.title }}</a>
</li>
</ul>

当我进入这个页面时，它工作得很好。显示类别名称，然后使用链接导航到文章。一切都很好。当我使用浏览器历史记录返回按钮时，问题就开始了。

它加载文章列表状态，它使用服务下载项目并显示列表，但它不显示类别名称。只显示简单的{{name}}。

Chrome显示奇怪的错误，但Firefox显示更具体的问题:

Error: [$rootScope:inprog] $digest already in progress
http://errors.angularjs.org/1.4.5/$rootScope/inprog?p0=%24digest

虽然我确实理解为什么这可能是一个问题，并且在另一个SO问题中清楚地描述了它，但我不明白问题的根源是什么，因此我无法解决它。

这听起来像是由外部事件执行AngularJS代码引起的问题。例如，您需要使用$scope.$apply(...)来执行window.resize事件中的代码。

这可能在正常的应用程序使用中正常工作，但是当你回到历史记录时，代码在摘要循环中执行。这会触发错误，如果在编译期间发生此错误，则模板将以不完整的绑定结束。这就是为什么你在页面上看到{{name}}。

这个函数可以解决这个问题。

    /**
     * @param {angular.IScope|angular.IRootScopeService} $scope
     * @param {function()} func
     */
    function safeApply($scope, func) {
        if ($scope.$$phase) {
            func();
        }
        else {
            $scope.$apply(function () {
                func();
            });
        }
    };

你需要用safeApply($scope,function(){....});找到并替换$scope.$apply(function(){....})

safeApply将检查是否已经在进行摘要。如果没有摘要，它就会知道这个方法是从Angular外部调用的，并且会调用$apply。否则，它将按原样执行回调。

问题可能不在你的应用程序中。它可能来自你正在使用的堆栈。你需要做些调查，找出问题出在哪里。如果问题在堆栈中。你应该向作者报告，这样其他人也能从中受益。

相关文章：