在以下代码中,为什么不uib-datepicker-popup
变成有角度的UI日期选择器?
我是否缺少该指令的某些标志/编译选项?
这是Angular-UI文档中datepicker-popup示例的精简示例,已修改为位于指令内部。请注意,当与控制器一起使用时,它是如何工作的,但是在我的示例中,与指令不起作用。
angular.module('ui.bootstrap.demo', ['ngAnimate', 'ngSanitize', 'ui.bootstrap']);
angular.module('ui.bootstrap.demo').directive('timeScale',()=>({
template: `
<h1>Scope:</h1>
<ul>
<li>format: {{format}}</li>
<li>dt: {{dt}}</li>
<li>popup: {{popup}}</li>
<li>dateOptions: {{dateOptions}}</li>
</ul>
<input type="text"
class="form-control"
uib-datepicker-popup="{{format}}"
ng-model="dt"
is-open="popup.opened"
datepicker-options="dateOptions"
ng-required="true"
close-text="Close"/>
`,
link: $scope => {
$scope.format = 'dd-MMMM-yyyy'
$scope.dt = null;
$scope.popup = {
openend: false
};
$scope.dateOptions = {
dateDisabled: false,
formatYear: 'yy',
maxDate: new Date(2020, 5, 22),
minDate: new Date(),
startingDay: 1
}
}
}));
<body ng-app="ui.bootstrap.demo">
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular-animate.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular-sanitize.js"></script>
<script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-2.5.0.js"></script>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<time-scale></time-scale>
</body>
是的,可以在指令内部使用该指令。我已经修改了您的代码。及其工作,请检查。
angular.module('ui.bootstrap.demo', ['ngAnimate', 'ngSanitize', 'ui.bootstrap']);
angular.module('ui.bootstrap.demo').directive('timeScale',()=>({
template: `
<h1>Scope:</h1>
<ul>
<li>format: {{format}}</li>
<li>dt: {{dt}}</li>
<li>popup: {{popup}}</li>
<li>dateOptions: {{dateOptions}}</li>
</ul>
<input uib-datepicker-popup="{{format}}" type="text"
class="form-control"
ng-model="dt"
is-open="popup.opened"
datepicker-options="dateOptions"
ng-required="true"
close-text="Close" ng-click="open()" />
`,
link: $scope => {
$scope.format = 'dd-MMMM-yyyy'
$scope.dt = null;
$scope.popup = {
openend: false
};
$scope.open = function() {
$scope.popup.opened = true;
}
$scope.dateOptions = {
dateDisabled: false,
formatYear: 'yy',
maxDate: new Date(2020, 5, 22),
minDate: new Date(),
startingDay: 1
}
}
}));
<body ng-app="ui.bootstrap.demo">
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular-animate.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular-sanitize.js"></script>
<script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-2.5.0.js"></script>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<time-scale></time-scale>
</body>
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句