javascript - jQuery UI Datepicker hash href 被 AngularJs Routing 误解

标签 javascript jquery html angularjs jquery-ui

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


背景:

我正在尝试在 AngularJs 应用程序中使用 jQuery UI 日期选择器插件。

这是一个使用 Angular 客户端路由的单页应用(这是一个关键细节)。

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

问题:

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

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

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

尝试的解决方案:

我尝试过使用 HTML5 路由(不使用散列标签的路由),但这没有帮助:Angular 没有尝试查找不同的页面,而是简单地重新加载您的 View 当前处于打开状态,破坏了用户可能所做的任何更改。

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

最佳答案

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

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

Original Bootstrap's CSS depends on empty href attributes to style cursors for several components (pagination, tabs etc.). But in AngularJS adding empty href attributes to link tags will cause unwanted route changes. This is why we need to remove empty href attributes from directive templates and as a result styling is not applied correctly.

关于javascript - jQuery UI Datepicker hash href 被 AngularJs Routing 误解,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/22610336/

相关文章:

Javascript require 方法在另一个 require 方法中

javascript - JQuery:如果表头 <th> 有一个类,将类添加到表单元格 <td>

javascript - 右键单击 JavaScript 不适用于 PHP 中的表格

javascript 将类添加到接下来的 7 个元素

Javascript:仅替换 <p></p> 内的文本?

c# - jQuery 核心/数据或自定义属性(数据驱动)

asp.net - 来自 ASP.NET 网页 (WebMatrix) 的 jQuery 帖子

html - 在html文档中使用mysql

javascript - 将分页转换为下拉式分页器

javascript - 标记在 Google map API 中不起作用