Question

我正在定义一个指令，它通过解释定义为数组中对象的菜单项列表来构建菜单。

菜单打开并显示正常。它是一个弹出菜单：它显示在它需要覆盖的页面的任何部分上方的前景中。到目前为止，非常好。

但是，我想在用户点击菜单外时立即隐藏菜单。为此，我使用了答案to this question来构建：

$scope.closeOnClick = function($scope) {
    var $menu = $('#menu-view');
    $(document).on('click', function(event) {
        if (!$(event.target).closest('#menu-view').length) {
            if ($menu.is(":visible")) {
                $scope.hideMenu();
            }
        }
    });
}

hideMenu是在切换按钮的控制器中定义的一个功能，用于控制打开和关闭菜单。

此closeOnClick函数在该控制器中定义。它也被称为“安装＆＃34;点击处理程序。

不幸的是，似乎$scope.hideMenu()无效并且控制台中没有报告错误。我也试过使用Angular事件，广播/开启但无济于事。

我正在寻找想法。谢谢。

Answer 1

我没有看到你的hideMenu函数，但我想让你的代码工作，你需要在$scope.$apply();之后添加$scope.hideMenu();

但这是非角度方法，更好地使用类似的东西：

<button ng-click="hideButton=true" ng-if="!hideButton">Button to hide</button>

Answer 2

这是一个经典的角度问题。 DOM事件处理程序不在Angular生命周期内运行，这就是您需要使用$scope.apply的原因。顺便说一下，你应该使用angular.element（）而不是普通的jquery。

if ($menu.is(":visible")) {
    $scope.apply($scope.hideMenu);
}

如何从事件处理程序调用AngularJS作用域定义的函数？

2 个答案: