我在AngularJS中有一个模态和一个面板。现在我要做的是在从模态中选择日期后显示日期,以便在面板中显示。我有开始日期和结束日期。
这是我的模态的主体,我可以在其中选择开始日期和结束日期:
<div class="modal-body">
<md-input-container flex> <input type="date"
ng-model="startDateL"> </md-input-container>
<md-input-container flex> <input
type="date" ng-model="endDateL"> </md-input-container>
<md-button ng-click="setDate()" class="md-primary">Update</md-button>
</div>
这是我的小组的主体:
<div class="panel-body">
<div class="row" ng-init="defaultDate()">
<div class="col-lg-12" ng-if="stDate && endDate">
<p>{{ stDate | date : 'longDate' }} - {{
endDate | date : 'longDate' }}</p>
</div>
</div>
</div>
这是JS文件:
angular.module('appl').directive('datePickerDirective',function($mdDialog, $rootScope, $filter){
return {
restrict: 'E',
templateUrl:'components/date-picker-select/date-picker-select.html',
scope: {},
controller:function($scope){
$scope.defaultDate = function(){
console.log("Dateeeeeeeee");
var date = new Date();
$scope.startDate = new Date(date.getFullYear(),date.getMonth(),1);
$scope.todaysDate = new Date();
}
$scope.footerLinkClicked = function(){
$mdDialog.show({
controller : datePickerController,
templateUrl : 'components/date-picker-select/date-picker-modal.html',
parent : angular.element(document.body),
clickOutsideToClose:true
}).then(function(answer) {
console.log("Fff");
}, function() {
});
}
},
controllerAs: 'DatePickerCtrl'
}
})
function datePickerController($scope, $mdDialog, $rootScope, datePickerFactory, $filter){
console.log("suntem in date picker sel");
var date = new Date();
$scope.startDateL = new Date(date.getFullYear(),date.getMonth(),1);
$scope.endDateL = new Date();
$scope.close = function() {
$mdDialog.hide();
console.log("closing");
}
$scope.setDate = function(startDate, endDate) {
$rootScope.startDate = $scope.startDateL;
$rootScope.endDate = $scope.endDateL;
$scope.stDate = $filter('date')($rootScope.startDate,'yyyy-MM-dd');
$scope.enDate = $filter('date')($rootScope.endDate,'yyyy-MM-dd');
console.log(stDate);
console.log(enDate);
$rootScope.$broadcast('dateWasChosen');
$mdDialog.hide();
}
}
我在setDate函数()中设置它们后尝试显示stDate和endDate,但它无法正常工作。有人有其他想法吗?
提前致谢!