javascript - Angularjs。 TypeError:无法读取未定义的属性“apply”

我有一个angularjs应用程序，该表单具有一个下拉列表和一个datetimepicker。

当我更改下拉列表时，我想更新日期选择器中显示的日期。

更改下拉列表中的选定项目时出现以下错误

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，以便显示更新后的值吗？

最佳答案

您要在此处更新模型：

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

然后，您尝试在此处设置datepickers值：

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

但是datepicker具有$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指令的更多信息。

关于javascript - Angularjs。 TypeError:无法读取未定义的属性“apply”，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/42628580/