当我使用angular.module("task", ['angularSpinner','ui.bootstrap'])
时,日历弹出窗口无法正常工作。我收到了错误:
错误:指令datepickerPopup:=?
的隔离范围定义无效
这是我的HTML页面
<div class="modal fade" id="myModal" tabindex="-1" data-backdrop="static" data-keyboard="false">
<div class="modal-dialog modal-sm">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title" id="myModalLabel">Create a New Task</h4>
</div>
<div class="modal-body">
<form name="registertaskForm" role="form" id="registertaskForm">
<span us-spinner="{radius:10, width:4, length: 15}" spinner-key="spinner-1-reg"></span>
<div class="form-group">
<input ng-model="taskname" type="text" ng-class="{ errorinput: submitted && registertaskForm.taskname.$invalid }" class="form-control" name="jobname" id="jobname" placeholder="Task Name" style="border-radius:0px;" />
<input ng-model="taskInstances" min="1" max="10" class="form-control" type="number" name="workerInstance" id="workerInstances" placeholder="Task Instance" value="1" onblur="if(this.value<1) { this.value='1'}" required/>
<select ng-model="taskSelected" ng-options="select for select in taskTypes" style="width: 100%;"></select>
</div>
<div ng-if="taskSelected == 'Job1'" class="form-group">
<p class="input-group">
<input type="text" class="form-control" datepicker-popup="{{format}}" ng-model="dt" is-open="opened" min-date="minDate" max-date="'2015-06-22'" datepicker-options="dateOptions" date-disabled="disabled(date, mode)" ng-required="true" close-text="Close" />
<span class="input-group-btn">
<button type="button" class="btn btn-default" ng-click="open($event)"><i class="glyphicon glyphicon-calendar"></i></button>
</span>
</p>
</div>
<div ng-if="taskSelected == 'Job2'" class="form-group">
<p class="input-group">
dfghdfhdfgh
</p>
</div>
<div class="modal-footer text-right">
<button type="submit" ng-disabled="register" class="btn btn-primary" ng-click="submitTheForm();">Create</button>
</div>
</form>
</div>
</div>
</div>
</div>
这是我的控制器
$scope.today = function() {
$scope.dt = new Date();
};
$scope.today();
$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 = {
formatYear: 'yy',
startingDay: 1
};