Angularjs正在将URL更改回原始导致问题

时间:2013-12-21 17:03:30

标签: jquery angularjs angular-resource

我的应用程序基于单页模型。我正在使用JQuery History对象来更改URL,以便在用户刷新应用程序时,我可以在用户刷新浏览器时保留应用程序的位置。它工作得很好但不知怎的它停止了工作。经过分析,我发现Angular.js正在将修改后的URL(由Jquery History API修改)更改为原始URL(用于启动Application的URL)。我很惊讶和困惑为什么突然Angular JS开始重置URL。我尝试了很多,但没有找到任何根本原因。请帮助,并请建议其他可能的方法,以保留浏览器刷新(或后退按钮)上的用户位置。以下是更多细节。

//Change the browser state to support History to launch file. It will remove projectid from URL and will add fileid
function updateBrowserStateOnFileLaunch(fileId, pageTitle, stateCounter)
{
    //Get current URL
    var finalURL = getNormalizedHashedURL("");
        //Remove projectid query string from paramter if it has and update/add fileid
        finalURL = updateQueryStringParameters(finalURL, [{key:"projectid", value:undefined}, {key:"fileid", value:fileId}]);   
    //Change history
    History.pushState({state:stateCounter,rand:getTimestampId()}, pageTitle, finalURL); 
}

注意:不添加“getNormalizedHashedURL”和“updateQueryStringParameters”方法的详细信息以保持帖子小。

我正在使用ng-if根据状态更改视图。

<!-- File editor view -->
        <div data-ng-if="currentView === 3">    
<!-- Project File view-->
</div>

在调试期间,我看到angular.js在执行以下行后重置URL。

我的应用程序中的代码尝试从服务器获取数据:

 //get list of templates by making server call using Angular $resource object
            Template.query({projectid: project._id}, function(response) {
//Processing of response
});

angular.js中正在重置网址的代码:

 $apply: function(expr) {
        try {
          beginPhase('$apply');
          return this.$eval(expr);
        } catch (e) {
          $exceptionHandler(e);
        } finally {
          clearPhase();
          try {
            $rootScope.$digest(); **//At this line I find that URL is getting reset**
          } catch (e) {
            $exceptionHandler(e);
            throw e;
          }
        }
      },

请帮忙。

1 个答案:

答案 0 :(得分:5)

来自Turn off URL manipulation in AngularJS

angular.module('sample', [])
    .config( ['$provide', function ($provide){
        $provide.decorator('$browser', ['$delegate', function ($delegate) {
            $delegate.onUrlChange = function () {};
            $delegate.url = function () { return ""};
            return $delegate;
        }]);
    }]);

ES6变体:

angular.module('sample', [])
    .config(["$provide", $provide => {
        $provide.decorator("$browser", ["$delegate", $delegate => {
            $delegate.onUrlChange = () => { };
            $delegate.url = () => "";

            return $delegate;
        }]);
    }]);