javascript - 如何访问我的 Controller 中的 AngularJS ui-bootstrap datepicker 值

Question

我正在使用 AngularJS Bootstrap UI 库。在我看来，我有像这样的日期选择器指令......

<div datepicker ng-model="mt" min-date="minDate" max-date="maxDate" year-range="1" show-weeks="false" ></div>

我注意到，当我尝试在 Controller 中引用“mt”的值时，它始终是未定义的，而它在 View 中是正确的/更新的。例如，这是我的 Controller 代码:

if(something === true) {
  console.log({ people: $scope.guestNumber, resTime: $scope.resTime, ddmmyyyy: $scope.mt }); // $scope.mt is always undefined!!!! 
}

显然，这一定是由于该指令有自己的作用域......所以我的问题是，如何访问 Controller 中“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 }}">

更新

我注意到这个错误似乎只发生在我的日期选择器位于 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;
    })

;

如果我在 Controller 中设置日期选择器的值，则日期永远不会更新!

Answer 1

这是因为您可能尚未在您的范围内初始化 mt。

datepicker 上的

ng-model 是双向绑定(bind)，因此当您不在 Controller 中提供值时，该值是 undefined 。 当用户选择一个日期时，它将被设置，但不会更早。

看这个例子: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);
  }
]);

更新

好的。因此，我认为您在子作用域中有 mt，但您希望将其放在父作用域中。

你可以尝试做这样的事情:

<div datepicker data-ng-model="dateHolder.mt"...

在 Controller 中:

$scope.dateHolder = {mt: new Date()};