0

我有一个模态组件，它接受一个带有绑定的对象（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;

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

4

1 回答 1

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

有关详细信息，请参阅

于 2020-02-01T17:11:51.377 回答