Question

我最近将我的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 here，另一个使用AngularJS 1.2.0 here。

ngModleOnBlur指令应从'change'元素中删除<input>绑定，并添加明确的'blur'绑定。

你会注意到这些小提琴的行为有所不同，就像elm.bind('blur', function(){...})的绑定实际上没有正确地绑定到该元素一样，并且似乎elm.unbind('input').unbind('keydown').unbind('change')在1.2中不起作用0.0。

我知道新的ng-blur指令，但在我的情况下，我不能直接使用它，但需要手动覆盖绑定到元素的事件。如果有人可以发布一个有关如何手动覆盖绑定到元素的事件的工作jsfiddle，和/或解释为什么它已经从1.2.0-rc.2更改为1.2.0，那将非常有帮助。

Answer 1

它与指令的评估顺序有关。

侦听DOM元素事件的input指令实际上是在指令之后执行的。只需添加

priority: 1

到您的指令定义。输入指令的默认优先级为0.

这是更新的小提琴

http://jsfiddle.net/yC627/

但奇怪的是，文档明确指出

Directives with greater numerical priority are compiled first.

但玩弄它，似乎恰恰相反。我无法告诉你为什么会这样。希望其他人可以加入。

编辑：我查看了更改日志，似乎是来自此更改

https://github.com/angular/angular.js/blob/master/CHANGELOG.md#breaking-changes-1

文档应该真正更新以反映这一点。与预链接或编译功能相比，后链接功能以反向优先级顺序解析。

Answer 2

我实现了fork＆amp;更新你的小提琴再次使用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 - Create a directive that uses ng-model

AngularJS 1.2.0-rc.2 vs 1.2.0元素绑定

2 个答案: