javascript - data-toggle ="dropdown"激活路由重定向而不是 yeoman 中的下拉菜单

Question

我正在使用 angular-bootstrap-datetimepicker ，特别是“带输入框的下拉日期时间”。它使用 data-toggle="dropdown" 属性。当我在一个简单的 nodejs express 服务器上运行我的 AngularJS 应用程序时，日历出现了。自从我迁移到 yeoman 后，单击下拉菜单会激活重定向到 /# (http://localhost:9000/#)

这就是我在 View 中使用日期时间选择器的方式:

dtpform.html

<div class="dropdown">
    <a class="dropdown-toggle" id="dropdown2" role="button" data-toggle="dropdown" data-target="#" href="#">
        <div class="input-group"><input type="text" class="form-control" data-ng-model="startDate"><span class="input-group-addon"><i class="glyphicon glyphicon-calendar"></i></span>
        </div>
    </a>
    <ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
        <datetimepicker data-ng-model="startDate" data-datetimepicker-config="{ dropdownSelector: '#dropdown2', minView: 'hour' }"/>
    </ul>
</div>

有同样问题的其他人忘记了一些依赖项。我的好像都装好了如果我将 datetimepicker 插入 index.html 而不是/dtp 路由，它就会弹出。

index.html

...
<!-- build:js(.) scripts/vendor.js -->
<!-- bower:js -->
<script src="bower_components/jquery/dist/jquery.js"></script>
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/bootstrap/dist/js/bootstrap.js"></script>
<script src="bower_components/angular-animate/angular-animate.js"></script>
<script src="bower_components/angular-cookies/angular-cookies.js"></script>
<script src="bower_components/angular-resource/angular-resource.js"></script>
<script src="bower_components/angular-route/angular-route.js"></script>
<script src="bower_components/angular-sanitize/angular-sanitize.js"></script>
<script src="bower_components/angular-touch/angular-touch.js"></script>
<script src="bower_components/moment/moment.js"></script>
<script src="bower_components/angular-moment/angular-moment.js"></script>
<script src="bower_components/angular-bootstrap/ui-bootstrap-tpls.js"></script>
<script src="bower_components/angular-bootstrap-datetimepicker/src/js/datetimepicker.js"></script>
<!-- endbower -->
<!-- endbuild -->
...

app.js

angular
  .module('c2gyoApp', [
    'ngAnimate',
    'ngCookies',
    'ngResource',
    'ngRoute',
    'ngSanitize',
    'ngTouch',
    'angularMoment',
    'ui.bootstrap',
    'ui.bootstrap.datetimepicker'
  ])
  .config(function($routeProvider) {
    $routeProvider
      ...
      .when('/dtp', {
        ...
        templateUrl: 'views/dtpform.html',
        ...
      }).
    otherwise({
      redirectTo: '/c2g'
    });
  });
  ...

任何想法是什么导致了这种行为？

Answer 1

href="#" 似乎是问题所在。 href 标签将告诉 Angular 路由器导航到匹配 /# 的路由。如果您删除它，下拉菜单应该可以正常打开。