Lok-Kwan Foo Lok-Kwan Foo - 1 month ago 16
AngularJS Question

UI-Bootstrap datepicker does not call function on inline controller scope

I am trying to add an angular ui datepicker to a form within a modal, and having issues with it not calling a function I am trying to define on the scope of the inline controller.

I am defining the modal template inline, as well as defining the controller of the modal inline with the open call. I have tried passing in the scope of the outer controller on the call to addTimeline but that doesn't seem to have helped.

Here is my code:



$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>




Answer

You're using controllerAs: 'vm' change your controller to controller:

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;
  };
}

or simply remove controllerAs: 'vm'

Comments