角。 TypeError：无法读取未定义的属性“应用”答案

【问题标题】：Angularjs. TypeError: Cannot read property 'apply' of undefined角。 TypeError：无法读取未定义的属性“应用”
【发布时间】：2017-03-06 14:49:38
【问题描述】：

我有一个带有下拉列表和日期时间选择器的表单的 angularjs 应用程序。

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

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

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 = new Date("24/12/2014 8:26 PM");
好的。这是有道理的，但它仍然给出相同的错误消息。 $scope.simulationsettings.StartDate = new Date("24/12/2014 8:26 PM"); // 在 datetimepicker 中显示新的日期 $("#fmStartDate").datetimepicker("setDate", $scope.simulationsettings.StartDate);
不要使用jquery，只设置模型。此行应删除： $("#fmStartDate").datetimepicker("setDate", $scope.simulationsettings.StartDate);
@Tony，我遇到了类似的问题！感谢您的提问。
@Groben，你做到了！非常感谢。

标签： javascript jquery angularjs bootstrap-datetimepicker

【解决方案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 指令的更多信息。

【讨论】：

在更改格式并且未将其转换为日期后，当我在下拉列表中选择另一个值时，值会更新。尽管 $scope.simulationsettings.StartDate = "12/24/2014"; 我仍然得到同样的错误// 在 datetimepicker 中显示新的日期 $("#fmStartDate").datetimepicker("setDate", $scope.simulationsettings.StartDate);
可能将赋值“$scope.simulationsettings.StartDate =”包含在 $timeout 中：$timeout(function () {$scope.simulationsettings.StartDate = yourValue});您是否使用特定的 datetimepicker 库？
我会试试的。我正在使用引导日期选择器
你是说这个？ angular-ui.github.io/bootstrap/#!#datepicker
非常感谢。删除那条线就可以了：-)我还有另外两个问题。我遇到了日期格式问题，我更改了表单使用的模型的名称，现在我的第一个角度表单正在工作。非常感谢大家的帮助:-)

【解决方案2】：

您正在尝试将日期对象放在文本字段中，如果您不使用日期选择器，这可能会起作用 1/ 将您的输入类型更改为输入日期或更改此$("#fmStartDate").datetimepicker("setDate", new Date($scope.simulationsettings.StartDate)); 到这个$("#fmStartDate").datetimepicker("setDate", $scope.simulationsettings.StartDate);，如果您的日期选择器接受这种格式“24/12/2014 8:26 PM”，它可能会起作用

2/您可能想查看日期选择器文档以了解可接受的格式类型

【讨论】：