Lok-Kwan Foo Lok-Kwan Foo - 10 months ago 53
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) {
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) {
$scope.opened = !$scope.opened;
controllerAs: 'vm'


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

<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">
class="btn btn-default"
<i class="glyphicon glyphicon-calendar"></i>
<uib-timepicker ng-model="tijdvakStart" hour-step="1" minute-step="15" show-meridian="false">

Answer Source

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) {
    vm.opened = !vm.opened;

or simply remove controllerAs: 'vm'