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);
      });
    }
  };
}]);

有了这可以承受的所有断点，我发现模型确实正确设置为 scope object newSession.time。并且，ev.time确实等于时间对象。然而，设置一个等于另一个似乎没有任何作用。不管我看的范围有多深。

有什么想法吗？

4

1 回答 1

0

我认为问题在于 Angular 不知道你改变了什么。Angular 对此一无所知timepicker().on，因此无法触发摘要。最简单的解决方案是将其包装在一个$timeout将强制进行摘要或在 $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 回答