javascript - 使用 jQuery 的 angularjs 应用程序中的路由错误

Question

我正在尝试使用 jQuery 设置 AngularJS 应用程序，并且我正在使用 Angular 路由系统来执行类似以下操作的 url:

var app = angular.module('app', []);

app.config(function($routeProvider) {
  $routeProvider.when('/start_page', {
    templateUrl: 'path/to/template',
    controller: 'StartPageController'
  });

  $routeProvider.when('/container/:container/thing/:thing', {
    templateUrl: 'path/to/template',
    controller: 'ThingsInContainersController'
  });

  $routeProvider.otherwise({ redirectTo: '/start_page' });

})

我可以导航到起始页面，该页面有一个界面，允许我选择一个container_id和一个thing_id，然后将我发送到容器和事物的路由，一切都完美。问题是，如果我刷新容器事物页面，则会收到以下错误:

Uncaught Error: Syntax error, unrecognized expression: [href=#container/1/thing/2]

从堆栈跟踪来看这似乎是一个 jQuery 错误。跟踪根本没有提到我的代码。我尝试了一些方法，似乎每当我在 # 之后输入一个包含多个 / 的网址时，我都会收到错误，而不是被正确重定向到起始页。我现在的解决方案是使用 -s 而不是 /s 作为 url 分隔符，这似乎有效，但我怀疑实际上有一种正确的方法可以做到这一点，我我想知道它是什么。

我当前的解决方案:

var app = angular.module('app', []);

app.config(function($routeProvider) {
  $routeProvider.when('/start_page', {
    templateUrl: 'path/to/template',
    controller: 'StartPageController'
  });

  $routeProvider.when('/container-:container-thing-:thing', {
    templateUrl: 'path/to/template',
    controller: 'ThingsInContainersController'
  });

  $routeProvider.otherwise({ redirectTo: '/start_page' });

})

Answer 1

我的代码库中的其他地方有一个错误，但我没有意识到。我在代码中使用了以下代码，该代码用于应用程序的不同部分，该部分使用 # url 来控制引导选项卡:

var activateTab = function() {
  var activeTab = $('[href=' + window.location.hash.replace('/', '') + ']');
  activeTab && activeTab.tab('show');
}

问题是默认情况下替换仅替换第一次出现的模式，因此当我有多个 / 时它会抛出错误。

当然的解决方案:

var activateTab = function() {
  var activeTab = $('[href=' + window.location.hash.replace(/\//g, '') + ']');
  activeTab && activeTab.tab('show');
}