javascript - Angular指令，触发作用域函数

Question

我有一个自定义弹出面板，我想添加在面板外部单击屏幕时关闭的功能。我创建了一个指令来完成此任务，但我很难传达关闭事件发生的情况。

<div ng-if="ui.showConfig" auto-hide="ui.showConfig=false">...</div>

JS

myApp.directive('autoHide',
    [function() {
        return {
            restrict: 'A',
            scope: {
              'autoHide': '&'
             },
            link: function (scope, element, attrs) {
                var $overlay = $("<div style='position:absolute;top:0;left:0;width:100%;height:100%;z-index:2000;'>");
                $overlay
                    .appendTo("body")
                    .one("click", function(e){ 
                        element.hide();
                        $overlay.unbind().remove(); 
                        // This is not firing...
                        // scope.autoHide(); 
                    });

                element.css("zIndex", "2001");

                element.on('$destroy', function() {
                    $overlay.unbind().remove();
                });
            }
        };
    }]);

Here is a jsfiddle

叠加层点击事件正在触发。面板已隐藏。但是 ui.showConfig 未设置为 false，导致用户下次单击按钮两次才能打开面板。

此外，如果我应该考虑其他方法，请告诉我!

Answer 1

在事件处理程序中，您需要调用 scope.$apply() 以便 Angular 获知有关更改的信息:

// This is not firing...
scope.autoHide(); 
scope.$apply();