0

我正在完成一个日历应用程序，我想使用 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 玩得很好？甚至禁用导致混淆的特定事件的路由？预先感谢您的任何贡献。

4

2 回答 2

0

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

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

基本上，这会禁用 angular 的点击拦截。因此，路由仅适用于预期目标。

于 2015-05-13T00:14:58.887 回答
0

我发现将锚点附加到 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

...特别是这一点> “添加目标 =“_self”在 Angular 1.0.1 中有效：使用 Facebook 登录此功能已记录（docs.angularjs.org/guide/$location - 搜索“_self”）如果你很好奇，请查看角度源（第 5365 行 @ v1.0.1）。只有在 !elm.attr('target') 为真时才会发生点击劫持。”

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

于 2017-07-31T09:32:49.343 回答