angularjs - 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形式。

这些临时(中间)路径似乎导致 $$parse 中的以下代码中断。 AppBase 绑定(bind)到“example.com/account/”，而 url 绑定(bind)到诸如“mysite.com/billing”之类的值。 withoutBaseUrl 绑定(bind)为 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

尝试在定义路由之前编写 interpolate 语句:

$interpolateProvider.startSymbol('{[{').endSymbol('}]}');

$stateProvider
 .state('account', {
 ...

模板链接和编译可能在 interpolate 语句执行之前已经开始，如果您使用了“{[}”，则在该模板中可能无法解析它。