我使用的是角度引导日期时间选择器,特别是"带输入框的下拉日期时间"。它使用data-toggle="dropdown"
属性。当我在一个简单的nodejsexpress服务器上运行AngularJS应用程序时,日历就出现了。由于我迁移到了yeoman,点击下拉菜单会激活到/#
(http://localhost:9000/#
)的重定向
这就是我在视图中使用日期时间选择器的方式:
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>
其他有同样问题的人忘记了一些依赖关系。我的似乎已经准备好了。如果我将日期时间选择器插入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'
});
});
...
知道是什么导致了这种行为吗?
href="#"
似乎是问题所在。href标记将告诉有角度的路由器导航到与/#
匹配的路由。如果您删除了它,下拉列表应该会打开ok。