Директивы AngularJS - лучшие практики при использовании ngModel с виджетами jQuery

Вот моя проблема. Например, у нас есть следующая директива, в которой используется некоторый виджет jQuery:

module.directive('myWidget', [function() {
    return {
        require: "ngModel",
        restrict: "A",
        replace: true,
        templateUrl: "templates/myWidget.html",
        link: function(scope, element, attrs, ctrl) {
            element.widget_name().on('value_updated', function(event) {
                scope.$apply(function() {
                    var newModelValue = event.some_value;
                    ctrl.$setViewValue(newModelValue);
                });
            });

            scope.$watch(attrs["ngModel"], function(value){
                element.widget_name('set_value', value);
            });
        }
    };
}]);

Итак, если значение модели изменится, то обработчик, который зарегистрирован с использованием $watch для прослушивания изменений в модели, будет выполнен, и, следовательно, будет запущен и метод widget 'set_value'. Это означает, что будет инициировано событие value_updated.

Мой вопрос: какова наилучшая практика для реализации аналогичного поведения в директивах, чтобы избежать дополнительных вызовов обработчиков событий и наблюдателей DOM?

Ответы

Ответ 1

Вместо scope.$watch() я предлагаю внедрить ctrl.$render(). $render следует вызывать только в том случае, если что-то внутри Angular изменяет модель. Пример скрипта.

Это решает проблему, о которой вы не говорили. К сожалению, это не решает проблему, о которой вы упоминали. В скрипте событие blur связано, а не какое-то событие widget.on(). Возможно, это сработает для вас. то есть обновлять модель только размытие, а не каждое нажатие клавиши (это предполагает, что ваш виджет принимает нажатия клавиш).

Возможно, вы также можете попросить автора виджетов предоставить метод "set", который не вызывает событие. Затем это можно использовать в методе $render().