如何让我的指令，只对火平变化？ [英] How do I get my directive to only fire on onchange?

问题描述

我定义的指令，像这样：

I've defined a directive like so:

angular.module('MyModule', [])
    .directive('datePicker', function($filter) {
        return {
            require: 'ngModel',
            link: function(scope, elem, attrs, ctrl) {
                ctrl.$formatters.unshift(function(modelValue) {
                    console.log('formatting',modelValue,scope,elem,attrs,ctrl);
                    return $filter('date')(modelValue, 'MM/dd/yyyy');
                });
                ctrl.$parsers.unshift(function(viewValue) {
                    console.log('parsing',viewValue);
                    var date = new Date(viewValue);
                    return isNaN(date) ? '' : date;
                });
            }
        }
    });

解析器似乎火每次我输入我的文本框的关键，虽然时间 - 究竟是默认情况下，它是 KEYUP 或输入？ ？如何将其更改为只火的onchange ？这真的是没有必要再经常比火。

The parser seems to fire every time I type a key in my textbox though -- what exactly is the default event, is it keyup, or input? And how do I change it to only fire onchange? It really isn't necessary to fire anymore often than that.

此外，我其实是操纵使用jQuery UI的日期选择器此输入的内容。当在日历上点击它似乎并没有触发导致要触发模型进行更新/分析器相应的事件。我的认为的我可以强制事件被解雇但我需要知道哪一个。

Furthermore, I'm actually manipulating the content of this input using jQuery UI's datepicker. When clicking on the calendar it doesn't seem to trigger the appropriate event that causes the model to be updated/parser to be triggered. I think I can force an event to be fired but I need to know which one.

尝试使用 $范围适用于（）但这似乎并没有任何帮助：

Trying to use scope.$apply() but that doesn't seem to help any:

.directive('datepicker', function($filter) {
    return {
        require: 'ngModel',
        link: function(scope, elem, attrs, ctrl) {
            $(elem).datepicker({
                onSelect: function(dateText, inst) {
                    console.log(dateText, inst);
                    scope.$apply();
                }
            });
            ctrl.$formatters.unshift(function(modelValue) {
                console.log('formatting',modelValue);
                return $filter('date')(modelValue, attrs.datePicker || 'MM/dd/yyyy');
            });
            ctrl.$parsers.unshift(function(viewValue) {
                console.log('parsing',viewValue);
                return new Date(viewValue);
            });
        }
    }
})

---

我不认为这里提供的解决方案我工作，因为（一）我想使用的日期选择器属性对于选择日期格式或其他选项，但更重要的是，（b），它似乎是一个字符串，通过回模型时，我想一个实际的日期对象...值，因此某种形式的解析也要做，并应用于在 NG-模型。

---

I don't think the solution given here works for me because (a) I want to use the datepicker attribute value for choosing a date format or other options, but more importantly, (b) it seems to be passing back a string to the model when I want an actual date object... so some form of parsing has to be done and applied to the ng-model.

推荐答案

下面我创建了一个MO-变化代理指令，它可以与NG-模型，它只有在变化更新代理变量。

Here I created a mo-change-proxy directive, It works with ng-model and it updates proxy variable only on change.

在本演示中，我甚至包括日期输入改进指令。一看。结果
演示： http://plnkr.co/edit/DBs4jX9alyCZXt3LaLnF p = preVIEW

In this demo I have even included improved directive for date-input. Have a look.
Demo: http://plnkr.co/edit/DBs4jX9alyCZXt3LaLnF?p=preview

angModule.directive('moChangeProxy', function ($parse) {
    return {
        require:'^ngModel',
        restrict:'A',
        link:function (scope, elm, attrs, ctrl) {
            var proxyExp = attrs.moChangeProxy;
            var modelExp = attrs.ngModel;
            scope.$watch(proxyExp, function (nVal) {
                if (nVal != ctrl.$modelValue)
                    $parse(modelExp).assign(scope, nVal);
            });
            elm.bind('blur', function () {
                var proxyVal = scope.$eval(proxyExp);
                if(ctrl.$modelValue != proxyVal) {
                    scope.$apply(function(){
                        $parse(proxyExp).assign(scope, ctrl.$modelValue);
                    });
                }
            });
        }
    };
});

这篇关于如何让我的指令，只对火平变化？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！