javascript – 由AngularJs Routing错误解释的jQuery UI Datepicker哈希href

2023年3月4日 152次阅读

这实际上是我自己的错.我没有正确初始化datepicker的模型.正确初始化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 datepicker的源代码,以便它不在href中使用hash标记.这可以从Angular的角度来看,但它打破了datepicker.如果没有主题标签,则datepicker的UI无法正确更新.此外,我想找到一个解决方案,如果可能的话,不涉及更改jQuery UI的源代码.

最佳答案 可能这已经超出了你的想法.但理想情况下你应该使用
Angular UI Bootstrap中的指令.存在
Angular UI的一个原因是为常用的jQuery插件提供Angular指令(基本上是角度包装器).

在Angular UI Bootstrap入门部分,它提到了引导程序使用#glag引起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.

点赞