1

我为http://eonasdan.github.io/bootstrap-datetimepicker编写了一个角度指令，并且我可以对 datetimepicker 执行操作来更新我的模型，但是当我尝试设置时遇到了问题datetimepicker 控件上的 defaultDate 与实例化期间我的模型中的值。

这是一个 plunker：http ://plnkr.co/edit/XUQSx7s0Fle2Xes77VrM?p=preview

脚本.js

var app = angular.module('app', []);

app.controller('DemoCtrl', function($scope) {
    $scope.modelDate = new Date("01/01/2010");
});

app.directive('datetimepicker', function() {
  return {
    restrict: 'A',
    require: 'ngModel',
    link: function (scope, element, attrs, ngModelCtrl) {
      // scope.$apply(); //This fixes the issue, but throws error in console
      element.datetimepicker( {
        defaultDate: ngModelCtrl.$modelValue
      })
      .on('dp.change', function(e) {
        ngModelCtrl.$setViewValue(e.date);
        scope.$apply();
      });
    }
  };
});

index.html 的相关部分

<div class="container">
  <div class="form-group col-xs-6">
    <div class="input-group date" datetimepicker ng-model="modelDate">
      <input type="text" class="form-control" />
      <span class="input-group-addon">
        <span class="glyphicon glyphicon-calendar"></span>
      </span>
    </div>
    Date from model: {{modelDate}}
  </div>
</div>

看起来问题出在 datetimepicker 实例化时，模型为空。在实例化 datetimepicker 之前执行scope.$apply()此操作可以解决此问题，但会在控制台中引发错误，这感觉不是正确的解决方法。任何帮助，将不胜感激！

4

1 回答 1

0

对我们的作用域强制调用 $apply 并不是最明智的做法。也许您应该尝试将其推迟到下一个摘要周期？

使用实用程序库（如Underscorejs），尝试以下操作：

_.defer(function(){scope.$apply();});
于 2015-02-09T16:23:58.897 回答