1

http://eonasdan.github.io/bootstrap-datetimepickerの角度ディレクティブを作成し、datetimepicker でアクションを実行してモデルを更新することはできますが、設定しようとすると問題が発生しますインスタンス化中に私のモデルからの値を持つdatetimepickerコントロールのdefaultDate。

ここにプランカーがあります: http://plnkr.co/edit/XUQSx7s0Fle2Xes77VrM?p=preview

script.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 がインスタンス化された時点にあるようです。モデルは null です。datetimepickerscope.$apply()をインスタンス化する前に実行すると、この問題は解決しますが、コンソールにエラーがスローされ、これは適切な方法とは思えません。どんな助けでも大歓迎です！

4

1 に答える 1

0

スコープで $apply 呼び出しを強制することは、最も賢明なことではありません。次のダイジェスト サイクルまで延期してみてはいかがでしょうか。

ユーティリティ ライブラリ ( Underscorejsなど) を使用して、次のことを試してください。

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