javascript - 禁用 UI-Router 与 window.location 的交互

Question

这是一个远景，但 UI-router 非常流行，我想也许这里有人会对这个问题有见解。

我正在将一个项目迁移到 Angular JS。该项目由一个包含多个不同面板的页面组成——每个面板都是使用 AJAX 从服务器下载为 HTML，使用 Javascript 注入(inject)页面，并与其自己的 href 相关联，href 由 jQuery History 管理。 .

jQuery 历史跟踪浏览器状态并在每个面板注入(inject) Javascript 后相应地更新 window.href。例如:

Panel 1:
  window.location.href // http://myapp.com/panel1
  History.getLocationHref() // http://myapp.com/panel1
  History.getPageUrl() // http://myapp.com/panel1
Panel 2:
  window.location.href // http://myapp.com/panel2
  History.getLocationHref() // http://myapp.com/panel2
  History.getPageUrl() // http://myapp.com/panel2
Panel 3:
  window.location.href // http://myapp.com/panel3
  History.getLocationHref() // http://myapp.com/panel3
  History.getPageUrl() // http://myapp.com/panel3

等等等等

因为这些面板中的每一个都是注入(inject)的，而不是在注入(inject)到 DOM 后使用 Angular 编译它们，所以我为每个面板引导单独的 AngularJs 应用程序。到目前为止，这一直运行良好。

现在我在 Panel 2 中使用 AngularJs UI-router - 所以我可以在替代模板中呈现数据。问题是，UI-Router 必须以某种方式混淆浏览器历史记录和/或窗口 href。因为一旦该应用程序被实例化，假设我从面板 1 开始，然后单击面板 2，然后单击面板 3，我遇到了这个问题:

Panel 1:
  window.location.href // http://myapp.com/panel1
  History.getLocationHref() // http://myapp.com/panel1
  History.getPageUrl() // http://myapp.com/panel1
Panel 2:
  window.location.href // http://myapp.com/panel2
  History.getLocationHref() // http://myapp.com/panel2
  History.getPageUrl() // http://myapp.com/panel2
Panel 3:
  window.location.href // http://myapp.com/panel2
  History.getLocationHref() // http://myapp.com/panel2
  History.getPageUrl() // http://myapp.com/panel3

基本上，一旦 UI-Router 被应用程序实例化，jQuery History 就不再起作用，并且位置 href 会保留在 ui-router 应用程序的 URL 中。

我能做些什么来禁用 ui-router 与窗口位置 href 的交互吗？或者是模块工作方式不可或缺的一部分？

如果有帮助，这是我的 panel2.states.js 文件:

angular.module("panel2")
.config(["$stateProvider", function($stateProvider) {
  $stateProvider
    .state('table', {
      views: {
        index: {
 //             controller: "TableController as at",
            templateUrl: "table.html"
        }
      }
    })
    .state('tiles', {
      views: {
        index: {
//              controller: "TilesController as tc",
            templateUrl: "tiles.html"
        }
      }
    });
}]);

更新(2015 年 4 月 27 日)

我通过摆脱 jQuery History 和它添加的超出我们需要的功能来解决我的特定问题。相反，我只是直接与 window.history 交互:

 window.history.pushState({panel: "panel3"}, 
    document.title + " | " + 'panel3', 
    window.location.href + "/panel3");

我仍然很好奇是什么导致了这种交互，以及 angular 或 angular ui-router 是否直接与 window.location 交互？

Answer 1

Angular 公开了 $location 服务来与 window.location 对象交互，我很确定 ui-router 使用它并且不是直接的 window.location 对象。你可以decorate config 函数中的 $location 服务拦截对 $location 服务的所有调用，并提供您自己的不使用 的实现窗口位置。

例如(高度简化):

$provide.decorate('$location', function($delegate) {
    var currentUrl = '';
    //we base the proxy on the original
    var locationProxy = Object.create($delegate);
    //and overwrite what we need
    locationProxy.url = function(newUrl) {
        if (newUrl) {
            $rootScope.$broadcast('$locationChangeStart' /* other event args here*/);
            currentUrl = newUrl;
            $rootScope.$broadcast('$locationChangeSuccess' /* other args here */);
        } else {
            return currentUrl;
        }
    };

});

它确实需要您以与原始 $location 服务兼容的方式实现所有功能，因此这可能需要相当多的工作。