0

このブートストラップ タイムピッカーを使用しようとしています: http://jdewit.github.io/bootstrap-timepicker/

私は次のようにhtmlに設定しました：

          <div class="input-append bootstrap-timepicker">
            <input my-timepicker="newSession.time" ng-model="newSession.time.value" type="text" class="input-small">
            <button type="button" class="add-on" style="padding: 2px 6px; height: 26px;"><i class="icon-time"></i></button>
          </div>

そして、それを起動してモデルを更新し続けるためのディレクティブを作成しました。

directives.directive('myTimepicker', ['$parse', function ($parse) {
  return {
    link: function(scope, element, attrs) {
      $(element).timepicker().on('changeTime.timepicker', function(ev) {
        var model = scope.$eval(attrs.myTimepicker);
        model = angular.copy(ev.time);
      });
    }
  };
}]);

これが耐えられるすべてのブレークポイントで、モデルが正しくスコープ オブジェクトに設定されていることがわかりましたnewSession.time。そして、ev.time時間オブジェクトに等しくなります。しかし、一方を他方と等しく設定しても、何も起こらないようです。どんなに深く見ても。

何かご意見は？

4

1 に答える 1

0

問題は、Angular があなたが何かを変更したことを認識していないことだと思います。Angular はそれを認識していないtimepicker().onため、ダイジェストを起動できません。最も簡単な解決策は、技術的により正しい$timeoutダイジェストまたは do を強制する で ラップすることです。$scope.$apply

双方向バインディングで分離スコープを使用する方が簡単な場合もあります。

directives.directive('myTimepicker', ['$timeout', function ($timeout) {
 return {
  scope: {myTimepicker:'='},
  link: function(scope, element, attrs) {
    $(element).timepicker().on('changeTime.timepicker', function(ev) {
      $timeout(function(){
        scope.myTimepicker = ev.time;
      });
    });
  }
  };
}]);

scope.apply バージョン:

directives.directive('myTimepicker', [function () {
 return {
  scope: {myTimepicker:'='},
  link: function(scope, element, attrs) {
    $(element).timepicker().on('changeTime.timepicker', function(ev) {
      scope.$apply(function () {
        scope.myTimepicker = ev.time;
      });
    });
  }
  };
}]);
于 2013-09-25T15:35:01.547 に答える