Devil May Code...

Vergil's Blog

今天在AngularJS下使用Fuel UXspinbox时出现了问题:

如果手动输入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,如果有更好的方法,欢迎讨论:)


添加新评论 »

在这里输入你的评论...

Powered by Typecho.