UI-Bootstrap datepicker不会在内联控制器范围内调用函数

时间:2015-11-21 19:02:21

标签: javascript jquery angularjs datepicker angular-ui-bootstrap

我正在尝试将角度ui日期选择器添加到模式中的表单,并且遇到问题而不是调用我试图在内联控制器范围内定义的函数。

我正在定义模态模板内联,以及定义与open调用内联的模态控制器。我已经尝试在调用addTimeline时传入外部控制器的范围,但这似乎没有帮助。

这是我的代码:

$scope.addTimeline = function($scope, $modal) {
        $uibModal.open({
        templateUrl: 'modalContent1.html',
        controller: function($scope) {
          $scope.vm = {};
          $scope.vm.newEvent = {
            vak: '',
            soort: '',
            klas: '',
            groep: '',
            lokatie: '',
            begintijd: '',
            eindtijd: '',
            duratie: ''
          };

          $scope.opened = false;
          $scope.vm.toggle = function($event) {
            $event.preventDefault();
            $event.stopPropagation();
            $scope.opened = !$scope.opened;
          };
        },
        controllerAs: 'vm'
      });

    };
<button class="btn btn-primary " ng-click="addTimeline($scope, $modal)">
    Voeg tijdvak toe
</button>

<div class="form-group">
                    <label class="col-md-4 control-label" for="selectbasic">Begintijd</label>
                        <div class="col-md-4">
                            <p class="input-group">
                                <input type="text" class="form-control" readonly uib-datepicker-popup="dd MMMM yyyy" name="newEvent" ng-model="newEvent.begintijd" is-open="opened" close-text="Close">
                                <span class="input-group-btn">
                                  <button
                                  type="button"
                                  class="btn btn-default"
                                  ng-click="vm.toggle($event)">
                                  <i class="glyphicon glyphicon-calendar"></i>
                                </button>
                              </span>
                            </p>
                            <uib-timepicker ng-model="tijdvakStart" hour-step="1" minute-step="15" show-meridian="false">
                            </uib-timepicker>
                        </div>
                    </div>

1 个答案:

答案 0 :(得分:0)

您正在使用控制器:&#39; vm&#39;将您的控制器更改为控制器:

function() {
  var vm = this;
  vm.newEvent = { vak: '', soort: '', klas: '', groep: '', lokatie: '', begintijd: '', eindtijd: '', duratie: '' };
  vm.opened = false;
  vm.toggle = function ($event) {
    $event.preventDefault();
    $event.stopPropagation();
    vm.opened = !vm.opened;
  };
}

或简单地删除controllerAs:&#39; vm&#39;