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

【问题标题】：UI-Bootstrap datepicker does not call function on inline controller scopeUI-Bootstrap datepicker 不会在内联控制器范围内调用函数
【发布时间】：2015-11-21 19:02:21
【问题描述】：

我正在尝试将 Angular 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>

【问题讨论】：

您正在使用 controllerAs: 'vm' 将您的控制器更改为控制器： function() { var vm = this; vm.newEvent = { vak：''，soort：''，klas：''，groep：''，lokatie：''，begintijd：''，eindtijd：''，duratie：''}; vm.opened = 假； vm.toggle = function($event) { $event.preventDefault(); $event.stopPropagation(); vm.opened = !vm.opened; }; },
或者干脆删除controllerAs: 'vm'
尝试接受下面的答案，很高兴我能提供帮助，但也可能是您没有足够的声誉来标记答案我不确定

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

【解决方案1】：

您正在使用 controllerAs: 'vm' 将您的控制器更改为控制器：

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: 'vm'

【讨论】：