如何处理指令内部的点击事件？

Question

我有一个模态组件，它接受一个带有绑定的对象 (ng-model)。类似于：

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

我正在检查 $ctrl.ngModel.show 到 show/hide 模态：

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

I show/hide 模式通过使用 ng-click 指令设置 modals.createContact.show:

<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;

如何使用指令实现这种情况？

Answer 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() 来从 JavaScript.

输入 AngularJS 执行上下文

有关详细信息，请参阅

AngularJS Developer Guide - Integration with the browser event loop

如何处理指令内部的点击事件？

How to handle click events from inside of the directive?

angularjs

angularjs-directive

angularjs-events