AngularJS предотвращает синхронизацию ngModel

#angularjs #angularjs-directive

#angularjs #angularjs-директива

Вопрос:

У меня есть простая директива под названием 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 во входных данных?

Вот plunkr, попробуйте вручную ввести значение, и вы поймете, о чем я говорю.

1. Почему бы вам не связать ввод текста с другим объектом модели. Затем в соответствующее время вы можете передать значение объекту реальной модели.

2. Если я это сделаю, проверки, такие как required , не будут работать, поскольку для этого необходимо ngModel проверить

Ответ №1:

На самом деле, после некоторых исследований я нашел решение этой проблемы.

Что я нашел на форумах и вопросах, так это то, что мне нужно было отменить привязку событий элемента, вот так:

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

Но это решение не сработало так, как ожидалось.

Проблема в том, что в настоящее время я использую Angular 1.2.x, я обнаружил, что вам также нужно установить некоторый приоритет для директивы, например:

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

priority: 1 В этом случае необходим из-за приоритета некоторых внутренних Angular.js директивы.

Вот обновленный плунжер с правильным приоритетом.

Ответ №2:

Просто добавьте ‘disabled’ к входным даннымhttp://plnkr.co/edit/xFeAmSCtKdNSQR1zbAsd?p=preview

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