AngularJS 1.2.0-rc.2 vs 1.2.0元素绑定
我最近将我的AngularJS框架从1.2.0-rc.2升级到了1.2.0版本,并遇到了一个奇怪的问题,我还没有找到解决办法。 我之前解决的问题是强制输入字段触发on-blur事件而不是on-change事件。 我最初使用的指令的代码是:
angular.module('app', []).directive('ngModelOnblur', function() { return { restrict: 'A', require: 'ngModel', link: function(scope, elm, attr, ngModelCtrl) { if (attr.type === 'radio' || attr.type === 'checkbox') return; elm.unbind('input').unbind('keydown').unbind('change'); elm.bind('blur', function() { scope.$apply(function() { ngModelCtrl.$setViewValue(elm.val()); }); }); } }; });
这只是使用此处的建议https://groups.google.com/forum/?fromgroups#!searchin/angular/change$20blur/angular/LH0Q1A-qTVo/eyVIjJsFZGcJ
我创建了两个jsFiddles,一个在这里使用AngularJS 1.2.0-rc.2,另一个在这里使用AngularJS 1.2.0。
ngModleOnBlur
指令应该从元素中删除
'change'
绑定并添加一个显式的'blur'
绑定。
你会注意到小提琴的行为有所不同,比如elm.bind('blur', function(){...})
的绑定elm.bind('blur', function(){...})
实际上并没有正确地绑定到元素上,而且似乎是elm.unbind('input').unbind('keydown').unbind('change')
在1.2.0中的工作方式不同。
我知道新的ng-blur
指令,但在我的情况下我不能直接使用它,但需要手动覆盖绑定到元素的事件。 如果有人可以发布一个如何手动覆盖绑定到元素的事件的工作jsfiddle,和/或解释为什么它已经从1.2.0-rc.2更改为1.2.0,那将是非常有帮助的。
它与指令的评估顺序有关。
侦听DOM元素事件的input指令实际上是在您的指令之后执行的。 只需添加
priority: 1
到您的指令定义。 输入指令的默认优先级为0。
这是更新的小提琴
然而,奇怪的是文档明确指出了这一点
Directives with greater numerical priority are compiled first.
但是玩弄它,似乎恰恰相反。 我不能告诉你为什么会这样。 希望其他人可以加入。
编辑:我查看了更改日志,它似乎来自这个变化
https://github.com/angular/angular.js/blob/master/CHANGELOG.md#breaking-changes-1
应该真正更新文档以反映这一点。 与预链接或编译function相比,后链接function以反向优先级顺序解析。
我实现了分叉和更新你的小提琴再次使用1.2.0。 这是你想到的行为吗? http://jsfiddle.net/P2q6B/2/
angular.module('app', []).directive('ngModelOnblur', function() { return { restrict: 'A', require: '?ngModel', priority: 99, link: function(scope, elm, attr, ngModel) { if(!ngModel) return; // do nothing if no ng-model if (['radio', 'checkbox'].indexOf(attr.type) > -1) return; elm.unbind('input').unbind('keydown').unbind('change'); //ui->model elm.on('blur', function() { scope.$apply(read.call(this)); }); function read() { ngModel.$setViewValue(elm.val()); } } }; });
如果是这样,我的解决方案就是读取angular.js源代码,特别是搜索contenteditable(约16k行;)
这个问题似乎是相关的: AngularJS – 创建一个使用ng-model的指令