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

前端之家收集整理的这篇文章主要介绍了angularjs – Angular ui-router似乎在加载时自动重写url前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
通过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',templateUrl: 'dashboard_resources.html',});

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

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

}]);

解决方法

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

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

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

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

猜你在找的Angularjs相关文章