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

Question

我有一个模态组件，该组件接受具有绑定的对象（ng-model）。类似于：

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

如何使用指令实现此方案？

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执行上下文。

有关更多信息，请参阅

• $apply()