今天在AngularJS下使用Fuel UX的spinbox时出现了问题：

如果手动输入input的值，一切正常。但如果使用spinbox的增加/减少按钮时，DOM已经被改变，$scope却无法同步修改后的值。

示例代码如下：

<div class="spinbox" data-initialize="spinbox" id="mySpinbox">
  <input type="text" class="form-control input-mini spinbox-input" ng-model="number">
  <div class="spinbox-buttons btn-group btn-group-vertical">
    <button type="button" class="btn btn-default spinbox-up btn-xs">
      <span class="glyphicon glyphicon-chevron-up"></span><span class="sr-only">Increase</span>
    </button>
    <button type="button" class="btn btn-default spinbox-down btn-xs">
      <span class="glyphicon glyphicon-chevron-down"></span><span class="sr-only">Decrease</span>
    </button>
  </div>
</div>

Why？

查看FuelUX源码可以发现它是使用jQuery的val()方法去修改DOM的值的（猜也猜到-_-||）。所以并没有启动$digest循环，详细看这篇文章。

解决办法

最简单的方法就是直接改FuelUX的源码，找到它调用render()方法之后，触发一下input事件：

this.$element.trigger('input');     

不过这种修改别人源码的做法非常不好

那么，我写了一个directive来更新模型：

angular.module('your-app').directive('spinbox', ['$parse', function($parse) {
    return {
        restrict: 'C',      //以ClassName的形式被声明
        link: function(scope, element, attrs) {
            element.on('changed.fu.spinbox', function() {
                var $spinbox = angular.element(this);
                var $input = $spinbox.find('.spinbox-input');
                var model = $input.attr('ng-model');

                if (!model) return;

                var setter = $parse(model).assign;
                scope.$apply(function(){
                    setter(scope, $spinbox.spinbox('value'));
                });
            });

        }
    }
}]);

使用jQuery钩子与AngularJS模型数据同步

OK，如果有更好的方法，欢迎讨论：）