Question

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

Answer 1

对于任何可能遇到此问题的人.... 我能够通过

来解决这个问题

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

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

Answer 2

我发现将锚点附加到URL确实达到了在角度路由处于活动状态时切换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锚点hrefs点击那些标签/锚点链接，Angular routing会拦截然后运行到默认的“找不到路由”目的地。 / p>

然而，将http://localhost:3000/#/play#menu1粘贴到网址栏中可以切换标签。

那说它似乎也在重置我的应用程序 - 它强制页面刷新可能是一个Angular SPA（使用我们的ngRoute），但是对于其他人来说知道这种行为可能会有用 - 简而言之YMMV可能有用; - ）

编辑*

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

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

......特别是这个位＆gt; “添加target =”_ self“适用于Angular 1.0.1：使用Facebook登录此功能已记录（docs.angularjs.org/guide/$location - 搜索'_self'）如果您很好奇，请查看在角度源（第5365行@ v1.0.1）。只有在！elm.attr（'target'）为真时才会发生点击劫持。“

尝试了这个和bingo - BootStrap标签工作，而Angular路由实际上...支持该建议的OP - 其他好的选项/建议也可以帮助其他情况。

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

2 个答案: