AngularJS：ng-route和Bootstrap datetimepicker之间的冲突答案

【问题标题】：AngularJS: conflict between ng-route and Bootstrap datetimepickerAngularJS：ng-route和Bootstrap datetimepicker之间的冲突
【发布时间】：2015-05-11 03:49:33
【问题描述】：

我正在完成一个日历应用程序，我想使用 datetimepicker 来更新事件。我正在使用的可以在这里找到：http://dalelotts.github.io/angular-bootstrap-datetimepicker/

这是我如何使用它的 HTML 示例：

<div class="dropdown" style="width:450px;">
    Selected Start Date: {{ event.start._i | date:'yyyy-MM-dd HH:mm' }}
      <a class="dropdown-toggle" id="start" role="button" data-toggle="dropdown" data-target="#start" href="#start">
        <div class="input-group"><input type="text" class="form-control" data-ng-model="event.start._i">
            <span class="input-group-addon"><i class="glyphicon glyphicon-calendar"></i></span>
        </div>
      </a>
      <ul class="dropdown-menu" role="menu" aria-labelledby="cLabel">
        <datetimepicker data-ng-model="event.start._i" data-datetimepicker-config="{ dropdownSelector: '#start' }"/>
      </ul>
    </div>

所以这应该做的是提供一个下拉菜单，允许您选择日期和时间（想象一下）。问题是锚标签需要 href="#" 属性才能使下拉菜单起作用。我真的不明白为什么它需要我只知道如果我将它取出或更改它就会失败（因为它什么都不做）。留下的 href 与 ng-route 有冲突，这意味着当您尝试打开下拉菜单时，它会将您路由到不存在的页面（'#'）。

我已经做了一堆谷歌搜索，但到目前为止只找到一个似乎与我的问题相匹配的。他们的解决方法是从 href 中删除 #，但这似乎对我不起作用。

有人有解决这个问题的建议吗？有没有办法可以强制 ng-route 玩得很好？甚至禁用导致混淆的特定事件的路由？提前感谢您的任何贡献。

【问题讨论】：

标签： jquery angularjs angularjs-directive bootstrap-datetimepicker angularjs-ng-route

【解决方案1】：

对于可能遇到此问题的其他人.... 我能够通过使用

解决这个问题

.run(['$rootElement', function($rootElement){
  $rootElement.off('click');
}]);

基本上，这会禁用 angular 的点击拦截。所以路由只适用于预期的目标。

【讨论】：

【解决方案2】：

我发现将锚点附加到 URL 确实达到了在 Angular 路由处于活动状态时切换 tbs 的预期效果。

例如，使用引导选项卡代码...

<ul class="nav nav-pills nav-justified">
  <li class="active"><a class="chat-btn" data-toggle="tab" href="#home">Chat</a>
  </li>
  <li class="gameseetings-btn"><a data-toggle="tab" href="#menu1">Game Settings</a>
  </li>
</ul>

例如 - 对于 localhost:3000/#/play，如果我单击带有 #home 和 #menu1 锚点 href 的选项卡/锚点链接，Angular 路由将拦截然后运行到默认的“找不到路由”目的地。

但是，将http://localhost:3000/#/play#menu1 粘贴到 URL 栏中可以切换选项卡。

也就是说，它似乎也在此过程中重置了我的应用程序 - 它强制刷新可能是 Angular SPA 的页面（我们使用的是 ngRoute），但对于某些人来说，了解此行为用于其他目的可能很有用- 简而言之，YMMV 可能有用 ;-)

编辑 *

我找到了一个不涉及完全关闭 Angular 的点击拦截的解决方案...

http://corpus.hubwiz.com/2/angularjs/11580004.html

...尤其是这一点> “添加 target="_self" 在 Angular 1.0.1 中有效：使用 Facebook 登录此功能已记录在案（docs.angularjs.org/guide/$location - search for ' _self') 如果您好奇，请查看角度源代码（第 5365 行 @ v1.0.1）。点击劫持仅在 !elm.attr('target') 为 true 时发生。"

尝试了这个和宾果游戏 - BootStrap 选项卡在 Angular 路由生效时工作......支持该建议的 OP - 那里的其他好的选项/建议也可能有助于其他情况。

【讨论】：