Angularjs. TypeError: Impossible de lire la propriété 'apply' de non défini

Question

J'ai l'application angularjs avec un formulaire qui a une dropdownlist et un datetimepicker.

Lorsque je modifie la liste déroulante, je souhaite mettre à jour la date affichée dans le sélecteur de date.

je reçois l'erreur suivante lorsque je change l'élément sélectionné dans le 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) 

Ceci est la ligne incriminée de code:

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

Voici mon contrôleur:

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

Voici ma forme:

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

La directive datetimepicker

"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(); 
    } 
    }; 
} 
]); 

Toute idée comment mettre à jour le DateTimePicker il affiche la valeur actualisée?

Answer 1

vous mettez à jour le modèle ici:

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

Ensuite, vous essayez de définir la valeur datepickers ici:

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

Mais le datepicker a $scope.simulationsettings.StartDate comme modèle. C'est pourquoi vous obtenez l'erreur. Angulaire essaie d'appeler le cycle de digestion deux fois.

Votre fonction devrait ressembler à ceci:

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

Mais puisque vous utilisez un input type="text" nous avons besoin de plus amples informations sur la directive datetimepicker que vous utilisez.

Answer 2

votre tentent de mettre un objet date dans le champ de texte qui peut fonctionner si vous ne l'utilisez une dattier 1/modifier le type d'entrée à date ou modifier cette $("#fmStartDate").datetimepicker("setDate", new Date($scope.simulationsettings.StartDate)); à cette $("#fmStartDate").datetimepicker("setDate", $scope.simulationsettings.StartDate); et il peut fonctionner si votre dattier accepte ce format « 24/12/2014 20:26 »

2/vous pouvez wanna vérifier la documentation dattier pour les types de format accepté