Как обрабатывать события щелчка изнутри директивы?

У меня есть модальный компонент, который принимает объект с привязкой (ng-модель). Что-то типа:

<modal ng-model="modals.createContact"></modal>

Я проверяю $ctrl.ngModel.show чтобы показать / скрыть модальное окно:

<div class="modal" ng-show="$ctrl.ngModel.show" ng-transclude></div>

Я показываю / скрываю модальное окно, установив modals.createContact.show с помощью ng-click директива:

<button ng-click="modals.createContact.show = true"></button>

Но это решение сложно поддерживать.

Мне нужна примерно такая директива для переключения модальных show свойство:

<button modal="modals.createContact">Toggle modal</button>

Директива должна прослушивать событие щелчка элемента (кнопки), а затем переключать $ctrl.modal.show свойство.

Под переключением я подразумеваю:

$ctrl.modal.show = !$ctrl.modal.show;

Как достичь этого сценария с помощью директив?

Источник

1 ответ

Решение

Для обработки событий щелчка внутри директивы обязательно используйте $apply:

app.directive("myDirective", function() {
    return {
        link: postLink
    }
    function postLink(scope, elem, attrs) {
        elem.on("click", function(ev) {
            scope.$apply(function() {
                //code here
            });
        });
    }
})

AngularJS изменяет обычный поток JavaScript, предоставляя собственный цикл обработки событий. Это разбивает JavaScript на классический и AngularJS контекст выполнения. Только операции, которые применяются в контексте выполнения AngularJS, выиграют от привязки данных AngularJS, обработки исключений, просмотра свойств и т. Д. Вы также можете использовать $apply() для входа в контекст выполнения AngularJS из JavaScript.

Для получения дополнительной информации см.

Источник
Другие вопросы по тегам