Angular ui-router似乎在加载时自动重写url

Question

通过ui-sref更改路由可以正常工作.

当我在基本URL(example.com/account)上手动刷新页面时,一切都同样有效.

但是,当我手动刷新页面并且url包含hashbang(即http://example.com/account/#/billing时,我在控制台中看到以下错误.

TypeError: Cannot read property 'charAt' of undefined
at Object.$$parse (https://ajax.googleapis.com/ajax/libs/angularjs/1.2.25/angular.js:9321:40)
at https://ajax.googleapis.com/ajax/libs/angularjs/1.2.25/angular.js:9878:21
at Scope.$get.Scope.$eval (https://ajax.googleapis.com/ajax/libs/angularjs/1.2.25/angular.js:12701:28)
at Scope.$get.Scope.$digest (https://ajax.googleapis.com/ajax/libs/angularjs/1.2.25/angular.js:12513:31)
at Scope.$get.Scope.$apply (https://ajax.googleapis.com/ajax/libs/angularjs/1.2.25/angular.js:12805:24)
at done (https://ajax.googleapis.com/ajax/libs/angularjs/1.2.25/angular.js:8378:45)
at completeRequest (https://ajax.googleapis.com/ajax/libs/angularjs/1.2.25/angular.js:8592:7)
at XMLHttpRequest.xhr.onreadystatechange (https://ajax.googleapis.com/ajax/libs/angularjs/1.2.25/angular.js:8531:11)

在阅读了这个错误并添加了断点之后,我注意到,在加载时,路径正在从表格中暂时重写

/account/#/billing
/account/#settings

其中帐户是应用程序的基础,表单是

/billing/ 
/settings/

最终,在错误发生后,地址栏中将恢复正确的URL表单.

这些临时(中间)路径似乎导致$$解析中的以下代码中断.AppBase绑定到"example.com/account/",url绑定到像"mysite.com/billing"这样的值.withoutBaseUrl绑定为undefined,因为url不包含超出appBase的字符.

  this.$$parse = function(url) {
    var withoutBaseUrl = beginsWith(appBase, url) || beginsWith(appBaseNoFile, url);
    var withoutHashUrl = withoutBaseUrl.charAt(0) == '#'
        ? beginsWith(hashPrefix, withoutBaseUrl)
        : (this.$$html5)
          ? withoutBaseUrl
          : '';

这是我的相关代码:

 plaidApp.config(['$stateProvider', '$urlRouterProvider',
'$interpolateProvider', function($stateProvider,
  $urlRouterProvider, $interpolateProvider) {

$stateProvider
  .state('account', {
    url: '/',
    controller: 'MainCtrl',
    templateUrl: 'dashboard_home.html',
  });

$stateProvider
  .state('metrics', {
    url: '/metrics',
    controller: 'MetricsCtrl',
    templateUrl: 'dashboard_metrics.html',
    resolve: {
      actions: ['actionModel', function(actionModel) {
        return actionModel.fetch();
      }]
    }
  });

$stateProvider
  .state('billing', {
    url: '/billing',
    controller: 'BillsCtrl',
    templateUrl: 'dashboard_billing.html',
    resolve: {
      bills: ['billingModel', function(billingModel) {
        return billingModel.fetch();
      }]
    }
  });

$stateProvider
  .state('resources', {
    url: '/resources',
    controller: 'MainCtrl',
    templateUrl: 'dashboard_resources.html',
  });

$stateProvider
  .state('settings', {
    url: '/settings',
    controller: 'SettingsCtrl',
    templateUrl: 'dashboard_settings.html',
  });

$urlRouterProvider.otherwise('/#');
$interpolateProvider.startSymbol('{[{').endSymbol('}]}');

}]);

Answer 1

我终于解决了这个问题（我认为）。看起来这是一个依赖问题。当我删除 HistoryJS (1.8.0) 后，一切都按预期工作。

  <script src="/bower_components/history/scripts/bundled/html4+html5/native.history.js" type="text/javascript"></script>