AngularJS使用spinbox
作者:vergil 发布时间:January 11, 2016 分类:AngularJS
今天在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'));
});
});
}
}
}]);
OK,如果有更好的方法,欢迎讨论:)
Sites of interest we have a link to.