Question

我有一个名为po-datepicker的简单指令，它在屏幕上显示一个日期选择器，但允许用户手动输入日期：

<input type="text" ng-model="model" po-datepicker required />

这是指令：

myApp.directive('poDatepicker', function () {
    return {
        require: ['?^ngModel'],
        restrict: 'A',
        link: function ($scope, elem, attrs, ctrl) {
            var ngModel = ctrl[0];
            var picker = elem.datepicker();

            picker.on('changeDate', function(e) {
                ngModel.$setViewValue(e.date);
                ...
            });

            elem.parent().find('button').on('click', function() {
                picker.datepicker('show');
            });

            var changeFn = function(e) {
                // Here I have some logic that calls $setViewValue();
            };

            picker.on('hide', changeFn);
            elem.on('keyup blur', changeFn);
        }
    };
});

这可以按预期工作，但是当我尝试在输入中键入值时，它会更新ngModel，更改范围中的变量，如何防止在输入中更改ngModel？

Here is a plunkr，尝试手动编写一个值，然后您就能理解我在说什么。

Answer 1

实际上，经过一些研究，我找到了解决这个问题的方法。

我在论坛和问题上发现的是我需要解开元素的事件，例如：

elem.unbind('input').unbind('keydown').unbind('change');

但是这个解决方案没有按预期工作。

问题是我目前正在使用Angular 1.2.x，我发现你还需要为该指令设置一些优先级，例如：

return {
    require: ['?^ngModel'],
    priority: 1,
    ...
}

在这种情况下需要priority: 1，因为一些内部Angular.js指令的优先级。

设置了正确的优先级的

Here is an updated plunker。

Answer 2

只需将“已停用”添加到输入http://plnkr.co/edit/xFeAmSCtKdNSQR1zbAsd?p=preview

即可

 <input type="text" class="form-control" ng-model="test" po-datepicker required feedback disabled/>

AngularJS阻止ngModel同步

2 个答案: