twitter-bootstrap Angularjs datepicker popup bootstrap-ui 在视图中不起作用
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/22581817/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Angularjs datepicker popup bootstrap-ui does not work in view
提问by Mega
I am an angularjs and bootstrap ui newbie! My date picker popup is not working in my included view. It works if its outside the view. i.e. as demoed here Any assistance will be appreciated. But, because I am using the ngRoute approach, I need to compose my view in the partial html and include in the main index.html. The inline calendar does not show and the popup calendar does not show as well. I cannot figure out the problem, but I think the date-picker.html cannot reference the script and style in my index.html. I have other included pane in the date-picker hmtl which references the scripts and css in the index.html fine. Any assistance will be appreciated. Below is the code:
我是 angularjs 和 bootstrap ui 新手！我的日期选择器弹出窗口在我包含的视图中不起作用。如果它在视图之外，它就可以工作。即作为演示here 任何帮助将不胜感激。但是，因为我使用的是 ngRoute 方法，所以我需要在部分 html 中编写我的视图并包含在主 index.html 中。内嵌日历不显示，弹出日历也不显示。我无法弄清楚问题所在，但我认为 date-picker.html 无法引用我的 index.html 中的脚本和样式。我在日期选择器 hmtl 中有其他包含的窗格，它引用了 index.html 中的脚本和 css 很好。任何帮助将不胜感激。下面是代码：
**index.html**
**index.html* *
<!doctype html>
<html lang="en" ng-app="ngdemo">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Some Services</title>
<link rel="stylesheet" href="css/app.css"/>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.8/angular.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0rc1/angular-route.min.js"></script>
<script src="js/app.js"></script>
<script src="js/services.js"></script>
<script src="js/controllers.js"></script>
<script src="js/filters.js"></script>
<script src="js/directives.js"></script>
<script src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.10.0.js"></script>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<ul class="menu">
<li><a href="#/date-picker"> <b> Date Management </b> </a></li>
</ul>
<div ng-view></div>
</body>
</html>
* app.js *
* app.js *
'use strict';
// Declare app level module which depends on filters, and services
angular.module('ngdemo', ['ngRoute','ngdemo.filters','ngdemo.services', 'ngdemo.directives', 'ngdemo.controllers']).
config(['$routeProvider', function ($routeProvider) {
$routeProvider.when('/date-picker', {templateUrl: 'partials/datepicker.html', controller: 'MixedContentCtrl'});
$routeProvider.otherwise({redirectTo: '/date-picker'});
}]);
controller.js *
控制器.js *
'use strict';
/* Controllers */
var app = angular.module('ngdemo.controllers',['ui.bootstrap']);
//Clear browser cache (in development mode)
//http://stackoverflow.com/questions/14718826/angularjs-disable-partial-caching-on-dev-machine
app.run(function ($rootScope, $templateCache) {
$rootScope.$on('$viewContentLoaded', function () {
$templateCache.removeAll();
});
});
var DatepickerDemoCtrl = function ($scope) {
$scope.today = function() {
$scope.dt = new Date();
};
$scope.today();
$scope.showWeeks = true;
$scope.toggleWeeks = function () {
$scope.showWeeks = ! $scope.showWeeks;
};
$scope.clear = function () {
$scope.dt = null;
};
// Disable weekend selection
$scope.disabled = function(date, mode) {
return ( mode === 'day' && ( date.getDay() === 0 || date.getDay() === 6 ) );
};
$scope.toggleMin = function() {
$scope.minDate = ( $scope.minDate ) ? null : new Date();
};
$scope.toggleMin();
$scope.open = function($event) {
$event.preventDefault();
$event.stopPropagation();
$scope.opened = true;
};
$scope.dateOptions = {
'year-format': "'yy'",
'starting-day': 1
};
$scope.formats = ['dd-MMMM-yyyy', 'yyyy/MM/dd', 'shortDate'];
$scope.format = $scope.formats[0];
};
datepicker.html **
日期选择器.html **
<div ng-controller="DatepickerDemoCtrl">
<pre>Selected date is: <em>{{dt | date:'fullDate' }}</em></pre>
<h4>Inline</h4>
<div style="display:inline-block; min-height:290px;">
<div class="well well-sm" ng-model="dt">
<datepicker min="minDate" show-weeks="showWeeks"></datepicker>
</div>
</div>
<h4>Popup</h4>
<div class="row">
<div class="col-md-6">
<p class="input-group">
<input type="text" class="form-control" datepicker-popup="{{format}}" ng-model="dt" is-open="opened" min="minDate" max="'2015-06-22'" datepicker-options="dateOptions" date-disabled="disabled(date, mode)" ng-required="true" close-text="Close" />
<span class="input-group-btn">
<button class="btn btn-default" ng-click="open($event)"><i class="glyphicon glyphicon-calendar"></i></button>
</span>
</p>
</div>
</div>
<div class="row">
<div class="col-md-6">
<label>Format:</label> <select class="form-control" ng-model="format" ng-options="f for f in formats"><option></option></select>
</div>
</div>
<hr />
<button class="btn btn-sm btn-info" ng-click="today()">Today</button>
<button class="btn btn-sm btn-default" ng-click="dt = '2009-08-24'">2009-08-24</button>
<button class="btn btn-sm btn-success" ng-click="toggleWeeks()" tooltip="For inline datepicker">Toggle Weeks</button>
<button class="btn btn-sm btn-danger" ng-click="clear()">Clear</button>
<button class="btn btn-sm btn-default" ng-click="toggleMin()" tooltip="After today restriction">Min date</button>
</div>
采纳答案by ryeballar
The culprit lies in
罪魁祸首在
app.run(function ($rootScope, $templateCache) {
$rootScope.$on('$viewContentLoaded', function () {
$templateCache.removeAll();
});
});
remove that and your date picker should work, I have a plunkerhere that is similar to your demo code.
删除它，您的日期选择器应该可以工作，我在这里有一个类似于您的演示代码的plunker。
