javascript 如何在我的控制器中访问 AngularJS ui-bootstrap datepicker 值
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/23991541/
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
How to access the AngularJS ui-bootstrap datepicker value in my controller
提问by Mike Sav
I am using the AngularJS Bootstrap UI library. In my view I have the datepicker directive like so...
我正在使用 AngularJS Bootstrap UI 库。在我看来，我有这样的 datepicker 指令......
<div datepicker ng-model="mt" min-date="minDate" max-date="maxDate" year-range="1" show-weeks="false" ></div>
I've noticed that when I try to reference the value of "mt" in my controller it is always undefined whilst it is correct / updates in the view. For example here is my controller code:
我注意到，当我尝试在我的控制器中引用“mt”的值时，它总是未定义，而它在视图中是正确的/更新。例如这里是我的控制器代码：
if(something === true) {
console.log({ people: $scope.guestNumber, resTime: $scope.resTime, ddmmyyyy: $scope.mt }); // $scope.mt is always undefined!!!!
}
Obviously this must be due to the directive having its own scope.... so my question is, how do I access the value of "mt" in my controller. I was going to use a hidden form input but this feels a little dirty to me (and I am unsure if it will work), like so:
显然，这一定是由于指令有自己的范围......所以我的问题是，我如何访问控制器中“mt”的值。我打算使用隐藏的表单输入，但这对我来说有点脏（我不确定它是否有效），如下所示：
<div datepicker ng-model="mt" min-date="minDate" max-date="maxDate" year-range="1 show-weeks="false" ></div>
<input type="text" ng-model="hiddenDate" value="{{ mt }}">
UPDATE
更新
I have noticed that this bug only seems to happen when my datepicker is in a modal window provided by ui.bootstrap.modal. The service I have for the models looks like so:
我注意到这个错误似乎只有在我的日期选择器位于 ui.bootstrap.modal 提供的模式窗口中时才会发生。我为模型提供的服务如下所示：
factory('modalService', function ($modal) {
var modal = angular.copy($modal);
// standard modal for alerts
modal.reservationMenu = function(message, title) {
var options = {
templateUrl: '../../views/modal/model-form.html',
controller: 'ModalMenuCtrl',
resolve: {
things: function() {
return {
title: title,
message: message
};
}
},
windowClass: 'menu-dia'
};
return modal.open(options);
};
return modal;
})
;
If I set the value of the datepicker in my controller, the date is never updated!
如果我在控制器中设置日期选择器的值，则日期永远不会更新！
采纳答案by Xeon
It's because you haven't initialized mtin your scope probably.
这是因为您可能还没有mt在您的范围内进行初始化。
ng-modelon datepickeris a two-way binding, so when you don't provide value in your controller the value is undefined .
When the user chooses a date it'll be set but no earlier.
ng-modelondatepicker是双向绑定，因此当您不在控制器中提供值时，该值是 undefined 。当用户选择一个日期时，它将被设置，但不会更早。
Look at this example: Plnkr.co
看这个例子：Plnkr.co
<div data-ng-controller="TestController">
<div datepicker data-ng-model="mt" data-year-range="1" data-show-weeks="false" ></div>
Date: {{mt}} <!-- 'filled' on init -->
<div datepicker data-ng-model="nt" data-year-range="1" data-show-weeks="false" ></div>
Date: {{nt}} <!-- empty on init -->
</div>
var myApp = angular.module('myApp', ['ui.bootstrap']);
myApp.controller('TestController', ['$scope',
function($scope) {
$scope.mt = new Date();
$scope.$watch('mt', function(newValue, oldValue) {
console.log('mt changed', oldValue, newValue);
}, true);
$scope.$watch('nt', function(newValue, oldValue) {
console.log('nt changed', oldValue, newValue);
}, true);
}
]);
UPDATE
更新
Ok. So I think that you have mtin a child scope but you want to get it in parent scope.
行。所以我认为你有mt一个子范围，但你想在父范围中得到它。
You could try doing something like this:
你可以尝试做这样的事情：
<div datepicker data-ng-model="dateHolder.mt"...
and in controller:
并在控制器中：
$scope.dateHolder = {mt: new Date()};
