Question

我正在尝试使用此bootstrap-timepicker：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确实等于时间对象。然而，设置一个等于另一个看起来没什么。无论我看的范围有多深。

有什么想法吗？

Answer 1

我认为问题在于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;
      });
    });
  }
  };
}]);

Angular指令不会设置范围对象

1 个答案: