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

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函数就是在那个控制器中定义的。它也在那里被调用，以便"安装"单击处理程序。

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

我正在寻找想法。谢谢。

Answer 1

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

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

Answer 2

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

但这是非角度方法，最好使用以下内容：

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