AngularJs 路由误解了 jQuery UI Datepicker hash href答案

【问题标题】：jQuery UI Datepicker hash href misinterpreted by AngularJs RoutingAngularJs 路由误解了 jQuery UI Datepicker hash href
【发布时间】：2014-03-24 13:09:11
【问题描述】：

这其实是我自己的错。我没有正确初始化日期选择器的模型。当 datepicker 正确初始化时，jQuery UI 会阻止导航事件触发。如果您也遇到此问题，那么像我一样，您做错了其他事情。我将把它留在这里作为一个警示故事。

背景：

我正在尝试在 AngularJs 应用程序中使用 jQuery UI datepicker 插件。

这是一个使用 Angular 客户端路由的单页应用程序（这是一个关键细节）。

我正在使用 jQuery UI v1.8.24 和 AngularJs v1.2.2

问题：

要选择日期，您必须单击日历中的某一天。日历中的每一天基本上都是带有 href 属性的风格化锚标记，设置为哈希标记。例如，日历中第 17 天的 HTML 看起来像这样

<a class="ui-state-default" href="#">17</a>

当用户单击此日期时，Angular 会认为他们正在尝试通过在路径“#/”处找到的页面的链接，并尽职尽责地尝试使用 AJAX 检索该页面。如果存在，它将显示它。如果没有，用户会得到一个漂亮的空白页面。显然，这两者都不是我想要的。我希望 Angular 在用户单击日期时只更新模型。

尝试的解决方案：

我尝试过使用 HTML5 路由（不使用哈希标签的路由），但这无济于事：Angular 不会尝试查找其他页面，而是简单地重新加载您的视图当前处于开启状态，正在破坏用户可能所做的任何更改。

我还尝试编辑 jQuery UI 日期选择器的源代码，以便它不在 href 中使用哈希标记。从 Angular 的角度来看，这是可行的，但它破坏了日期选择器。如果没有主题标签，日期选择器的 UI 将无法正确更新。另外，如果可能的话，我想找到一个不涉及更改 jQuery UI 源代码的解决方案。

【问题讨论】：

你有没有试过使用非html5模式$locationProvider.html5Mode(false).hashPrefix('!');这会设置#!/[route]路由。
如何从日期选择器捕获点击事件并停止传播/防止默认操作？
还有一个 Angular-UI-Date 指令用于 jQuery-UI 的日期选择器：github.com/angular-ui/ui-date
其实这都是我自己的错。我没有正确初始化日期选择器的模型。它是未定义的，这导致抛出异常。显然，当一切设置正确时，这不是问题。
我遇到了同样的问题。您能否提供有关如何“初始化模型”的更多详细信息？

标签： javascript jquery html angularjs jquery-ui

【解决方案1】：

你可能已经想到了这一点。但理想情况下您应该使用Angular UI Bootstrap 中的指令。 Angular UI 存在的一个原因是为常用的 jQuery 插件提供 Angular 指令（本质上是 Angular 包装器）。

在 Angular UI Bootstrap 入门部分中，它提到了 bootstrap 使用 # 标签导致 Angular 出现问题，jQueryUI 插件也存在同样的问题。

原始 Bootstrap 的 CSS 依赖于空的 href 属性来设置样式几个组件（分页，标签等）的光标。但在 AngularJS 将空的 href 属性添加到链接标签会导致不必要的路线更改。这就是为什么我们需要删除空的href 来自指令模板的属性，因此样式不是正确应用。

【讨论】：

是的，我实际上在我的应用程序中使用 Angular UI Bootstrap 来处理许多事情。但是，我发现他们的日期选择器不能满足我的要求。我构建了一个自定义 angular 指令，它包装了此处找到的日期选择器：trentrichardson.com/examples/timepicker（它是股票 jQuery 日期选择器的扩展）。我没有在描述中提到这一点，因为我认为这是一个不必要的细节。
有趣的是，构建 Angular UI 的人也遇到了同样的问题。我遇到问题的原因是因为我将日期选择器传递给了一个统一的日期。也许我正在使用的时间选择器扩展比我想象的要多？或者也许他们使用比我使用的旧版本的 jQuery UI 遇到了这个问题？我必须深入研究 jQuery UI 的源代码才能确定，我目前不倾向于这样做。如果其他人知道并愿意分享，我将不胜感激。