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()以便让角度获得有关更改的信息：

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

Answer 2

我想建议你在第一次不要使用附加在DOM额外元素或其他内容的jquery，并且我还建议使用已经构建angular bootstrap modal 这会给你更多的好处。您可以查看链接并查看示例以及如何在项目中包含该模块。我非常确定弹出式bootstrap mpodal所需的所有功能是什么。

Answer 3

我确实尝试过你的jsfiddle和http://jsfiddle.net/yke1pm7g/1/显然事件正在发生，但是我不明白scope.autoHide()会发生什么事？

Angular指令，触发范围功能

3 个答案: