Question

我继承了一些代码，但我对AngularJS不太了解。我有一个带有ng-model的日期选择器输入和一个调用控制器的on-change事件。问题在于所选日期未传递到控制器。

HTML文件

  <div>
    <label class="mini-label" for="date">Reference Date</label>
    <input type="date" class="control" id="date" ng-model="ctrl.date"
           kendo-date-picker k-on-change="ctrl.dateChanged()">
  </div>

JS文件

angular.module('fo.components.duty-monitoring', [])
  .directive('foDutyMonitoring', function () {
    return {
      transclude: true,
      restrict: 'E',
      scope: {},
      controllerAs: 'ctrl',
      bindToController: true,
      controller: function (Company, CompanyUser, Auth, $q, CONFIG, $state, jsreport, $scope,
        $timeout) {
        var _this = this;
        _this.fileExportType = 'xlsx';
        _this.WARNING_THRESHOLD = CONFIG.CUMULATIVE_DUTY_WARNING_THRESHOLD;
        _this.pilotUsers = null;
        _this.userThresholdTotals = {};
        _this.date = new Date();
        _this.exporting = false;
        _this.loading = true;
        var companyName = Auth.defaultCompany.name;

        var users = Company.prototype$getPilotNames({
          id: Auth.defaultCompany.id,
        }).$promise.then(function (users) {
          _this.pilotUsers = users.map(function (user) {
            user.baseIds = _.map(user.bases, 'id');
            return user;
          });

          return _this.pilotUsers;
        });

        _this.setComboboxHandler = function (event) {
          event.sender.input.on('click', function () {
            event.sender.open();
          });
        };

        var thresholdSettings = Company.dutyRuleset({ id: Auth.defaultCompany.id })
          .$promise.then(function (data) {
            _this.thresholdSettings = data;
            _this.thresholdCount = data.dutyThresholds.length +
                data.flightThresholds.length + data.minimumRest.length;
            data.minimumRest.forEach(function (period) {
              ['restAmount', 'period'].forEach(function formatUnit(field) {
                period[field + 'FormattedUnit'] = (period[field + 'Unit'] === 'hour') ?
                  'Hrs' : 'Days';
              });
            });

            _this.loading = false;
            return data;
          }, function () {

            _this.thresholdSettings = null;
          });

        _this.dateChanged = getThresholds;

        getThresholds();

        Company.bases({
          id: Auth.defaultCompany.id,
        }).$promise.then(function (bases) {
          _this.bases = [
            {
              name: 'All Bases',
              id: 0,
            },
          ].concat(bases);
        });

        _this.baseChange = function () {
          users.then(function (result) {
            _this.pilotUsers = _.cloneDeep(result).filter(function (user) {
              return !+_this.base ||  _.contains(user.baseIds, +(_this.base));
            });
          });
        };

        function getThresholds() {
          return $q.all({ thresholdSettings: thresholdSettings, users: users })
          .then(function (result) {
            console.log('result: ', result);
            if (!result.thresholdSettings) {
              return;
            }

            result.thresholdSettings.date = _this.date;

            _this.pilotUsers.forEach(function (user) {
              CompanyUser.prototype$checkDutyRulesets({ id: user.id }, result.thresholdSettings,
                function (result) {
                  _this.userThresholdTotals[user.id] = result;
                });
            });
          });
        }

        this.isExceeding = function (pilot, threshold, type) {
          return this.isApproaching(pilot, threshold, type, 1);
        };

        this.isApproaching = function (pilot, threshold, type, weight) {
          weight = weight == null ? this.WARNING_THRESHOLD : weight;
          if (!this.userThresholdTotals[pilot.id]) {
            return false;
          }

          var value = this.userThresholdTotals[pilot.id][type][threshold.periodDays];
          return value > threshold.limitHours * weight;
        };

        this.goToPilot = function (pilot) {
          $state.go('^.duty', { id: pilot.id });
        };

        this.openExport = function () {
          $timeout(function () {
            $scope.$broadcast('openModal');
          });
        };

        _this.report = {
          name: 'Duty Monitoring',
          fields: {
            pdf: true,
            xlsx: true,
            asAt: true,
            bases: true,
          },
        };

        _this.filters = {
          base: '',
        };

        _this.exportFile = function () {
          _this.exporting = true;
          getThresholds().then(function () {
            var dataObject = {
              companyName: companyName,
              date: _this.date,
            };

            dataObject.pilots = _this.pilotUsers.filter(function (user) {
              return !+_this.filters.base ||  _.contains(user.baseIds, +(_this.filters.base));
            }).map(function (user) {
              return {
                name: user.firstName + ' ' + user.lastName,
                id: user.id,
                dutyThresholds: _this.userThresholdTotals[user.id].duty,
                flightThresholds: _this.userThresholdTotals[user.id].flight,
                minimumRest: _this.userThresholdTotals[user.id].minimumRest,
              };
            });

            thresholdSettings.then(function (settings) {
              dataObject.thresholdSettings = {
                dutyThresholds: settings.dutyThresholds,
                flightThresholds: settings.flightThresholds,
                minimumRest: settings.minimumRest,
              };
            });

            return dataObject;
          }).then(function (exportObject) {
            var templateName = 'duty-monitoring-report';

            if (_this.fileExportType === 'xlsx') {
              templateName += '-xlsx';
            }

            jsreport.renderReport(templateName, _this.fileExportType, exportObject)
            .then(function () {
              _this.exporting = false;
            });
          });
        };
      },

      templateUrl: 'components/duty/monitoring/duty-monitoring-component.html',
    };
  });

不太确定如何解决此问题。

Answer 1

尝试使用“ k-ng-model”而不是“ ng-model”。 Kendo的控件在Angular中使用时通常有些古怪。他们的许多角度指令的k-前缀都是为了解决这个问题。

AngularJS中的控制器未正确处理日期选择器日期

1 个答案: