使用 jQuery 的 angularjs 应用程序中的路由错误答案

【问题标题】：routing bug in an angularjs app with jQuery使用 jQuery 的 angularjs 应用程序中的路由错误
【发布时间】：2013-11-06 15:30:29
【问题描述】：

我正在尝试使用 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' });

})

【问题讨论】：

href 不需要是“#/container/1/thing/2”吗？此外，如果您在 url 中使用句柄栏进行模板化，您的元素可能需要使用 ng-href。
没有理由以这种方式创建您的网址。你应该这样做：/mycontainerthingurl/:containerID/:thingID
可以添加锚标签的代码吗？
@mortalapeman 没有链接。 start_page 使用 $location.path() 调用响应表单提交，并且工作正常。当我刷新页面时，问题就出现了。
@m.e.conroy 为什么重要？

标签： javascript jquery angularjs angularjs-routing

【解决方案1】：

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

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

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

当然的解决方案：

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

【讨论】：