Angularjs. TypeError: Cannot read property 'apply' of undefined

Question

I have angularjs app with a form that has a dropdownlist and and a datetimepicker.

When I change the dropdownlist I want to update the date displayed in the datepicker.

I get the following error when I change selected item in the dropdownlist

TypeError: Cannot read property 'apply' of undefined
at HTMLInputElement.<anonymous> (bootstrap-datetimepicker.min.js:2)
at Function.each (jquery-3.1.1.min.js:2)
at r.fn.init.each (jquery-3.1.1.min.js:2)
at r.fn.init.a.fn.datetimepicker (bootstrap-datetimepicker.min.js:2)
at m.$scope.SymbolChanged (moduleConfigformController.js:29)
at fn (eval at compile (angular.js:15197), <anonymous>:4:159)
at m.$eval (angular.js:18017)
at angular.js:25775
at Object.<anonymous> (angular.js:28600)
at q (angular.js:357)

This is the offending line of code:

$("#fmStartDate").datetimepicker("setDate", new Date($scope.simulationsettings.StartDate));

Here is my controller:

mainApp2.controller("moduleConfigformController",
function moduleConfigformController($scope, moduleConfigformService, $uibModalInstance) {
$scope.close = function (e) {
    $uibModalInstance.dismiss();
    e.stopPropagation();
};

$scope.formDebug = "loaded";

var settingsPromise = moduleConfigformService.simulationsettings();

settingsPromise.then(function (settings) {
    $scope.simulationsettings = settings;
    $scope.symbols = $scope.simulationsettings.symbols;
    $scope.intervals = $scope.simulationsettings.intervals;
}).catch(function (error) {
    throw error;
});

$scope.SymbolChanged = function () {
    console.log("Symbol ddl changed");
    console.log("New value is " + $scope.simulationsettings.Symbol);

    // hardcoded date
    // TODO: Find StartDate and EndDate where Symbol = $scope.simulationsettings.Symbol
    $scope.simulationsettings.StartDate = "24/12/2014 8:26 PM";

    // Display the new date in the datetimepicker
    // This line produced the TypeError
    $("#fmStartDate").datetimepicker("setDate", new Date($scope.simulationsettings.StartDate));

    console.log("startdate is " + $scope.simulationsettings.StartDate);
    console.log("startdate is " + $scope.simulationsettings.EndDate);
}

$scope.submitConfigForm = function () {
    console.log("configform submitted");

    var startDate = $scope.simulationsettings.StartDate;
    var endDate = $scope.simulationsettings.EndDate;
    var symbol = $scope.simulationsettings.Symbol;
    var interval = $scope.simulationsettings.Intervals;

    $scope.formDebug = "StartDate: " + startDate + " EndDate: " + endDate + " Symbol: " + symbol + " Interval: " + interval;
}
});

Here is my form:

<form name="configForm" ng-submit="submitConfigForm()">
<div class="modal-header" style="text-align:center">
    <h3 class="modal-title">Configure</h3>
    <div style="margin-top:10px">
        <button tabindex="100" class="btn btn-success pull-left" type="submit" ng-class="{'btn-primary':configForm.$valid}">Start analysis</button>
        <button class="btn btn-warning pull-right" ng-click="close($event)">Close</button>
    </div>
</div>
<div class="modal-body">
    <div class="col-sm-6" style="width: 100%;">
        <div class="form-horizontal">
            <div class="form-group">
                <label class="control-label col-sm-3">Symbol</label>
                <div class="col-sm-9">
                    <select ng-model="simulationsettings.Symbol" ng-change="SymbolChanged()" name="fmSymbols" id="fmSymbols">
                        <option ng-repeat="item in symbols" value="{{item.Symbol}}">{{item.Symbol}}</option>
                    </select>
                </div>
            </div>
            <div class="form-group">
                <label class="control-label col-sm-3">start date</label>
                <div class="col-sm-9">
                    <input type="text" id="fmStartDate" class="form-control input-sm"
                           datetimepicker
                           ng-model="simulationsettings.StartDate"
                           placeholder="..."
                           name="fmStartDate">
                </div>
            </div>
         </div>
        form debug: '{{formDebug}}'
    </div>
</div>

The datetimepicker directive

"use strict";
angular.module("datetimepicker", [])
.provider("datetimepicker", function () {
var defaultOptions = {};

this.setOptions = function (options) {
  defaultOptions = options;
};

this.$get = function () {
  return {
    getOptions: function () {
      return defaultOptions;
    }
  };
};
})

.directive("datetimepicker", [
"$timeout",
"datetimepicker",
function ($timeout,datetimepicker) {

  var defaultOptions = datetimepicker.getOptions();

  return {
    require : "?ngModel",
    restrict: "AE",
    scope   : {
      datetimepickerOptions: "@"
    },
    link : function ($scope, $element, $attrs, ngModelCtrl) {
      var passedInOptions = $scope.$eval($attrs.datetimepickerOptions);
      var options = jQuery.extend({}, defaultOptions, passedInOptions);

      $element
        .on("dp.change", function (e) {
          if (ngModelCtrl) {
            $timeout(function () {
                ngModelCtrl.$setViewValue(e.target.value);
            });
          }
        })
        .datetimepicker(options);

      function setPickerValue() {
        var date = options.defaultDate || null;

        if (ngModelCtrl && ngModelCtrl.$viewValue) {
          date = ngModelCtrl.$viewValue;
        }

        $element
          .data("DateTimePicker")
          .date(date);
      }

      if (ngModelCtrl) {
        ngModelCtrl.$render = function () {
          setPickerValue();
        };
      }

      setPickerValue();
    }
  };
}
]);

Any idea how to update the datetimepicker so it displays the updated value?

Answer 1

You are updating the model here:

 $scope.simulationsettings.StartDate = "24/12/2014 8:26 PM";

Then you try to set the datepickers value here:

$("#fmStartDate").datetimepicker("setDate", new Date($scope.simulationsettings.StartDate));

But the datepicker has $scope.simulationsettings.StartDate as model. This is why you get the error. Angular is trying to call the digest cycle twice.

Your function should look like this:

$scope.SymbolChanged = function () {
    console.log("Symbol ddl changed");
    console.log("New value is " + $scope.simulationsettings.Symbol);

    // hardcoded date
    // TODO: Find StartDate and EndDate where Symbol = $scope.simulationsettings.Symbol
    // the binding should be of the same type as your input, it means that the value returned from the datepicker must be a Date
    $scope.simulationsettings.StartDate =  new Date("24/12/2014 8:26 PM");

    // This line is useless, the datepicked model is binded to $scope.simulationsettings.StartDate
    // $("#fmStartDate").datetimepicker("setDate", new Date($scope.simulationsettings.StartDate));

    console.log("startdate is " + $scope.simulationsettings.StartDate);
    console.log("startdate is " + $scope.simulationsettings.EndDate);
}

But since you are using an input type="text" we need more information on the datetimepicker directive that you are using.