Angularjs。類型錯誤：無法讀取屬性未定義

Question

「應用」我有angularjs應用程序與一個具有下拉列表，並和一個DateTimePicker的形式。

當我更改下拉列表時，我想更新datepicker中顯示的日期。

我收到以下錯誤，當我在下拉列表

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) 

改變所選擇項這是一個問題的代碼行：

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

這裏是我的控制器：

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

這是我的表格：

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

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

任何想法如何，使其顯示更新後的值更新的DateTimePicker？

Answer 1

您在這裏更新模型：

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

然後嘗試在這裏設置datepickers值：

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

但日期選擇具有$scope.simulationsettings.StartDate爲模型。這就是你得到錯誤的原因。 Angular正試圖調用摘要循環兩次。

你的功能應該是這樣的：

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

但由於您使用的是input type="text"我們需要在datetimepicker指令您正在使用的詳細信息。

Answer 2

你正試圖把在文本字段Date對象，如果你不使用日期選擇器可工作 1 /改變你的輸入型，將日期或更改此$("#fmStartDate").datetimepicker("setDate", new Date($scope.simulationsettings.StartDate)); 這個$("#fmStartDate").datetimepicker("setDate", $scope.simulationsettings.StartDate); ，它可能工作如果您的日期選擇接受此格式「24/12/2014下午8:26」

2 /你可能想檢查日期選擇文檔的接受的格式類型