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

我正在定义一个指令，通过解释定义为数组中对象的菜单条目列表来构建菜单。如何从事件处理程序调用AngularJS范围定义的函数？

菜单打开并显示正常。这是一个弹出式菜单：它显示在上面的任何部分上方，它需要覆盖。到现在为止还挺好。

但是，只要用户在菜单外单击，我想隐藏菜单。对于这一点，我使用的答案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函数是在那个非常控制器中定义的。它也被称为“安装”点击处理程序。

不幸的是，似乎$scope.hideMenu()是无效的，控制台中没有报告错误。我也尝试过使用Angular事件，但是没有成功。

我正在寻找想法。谢谢。

来源

2016-01-19 AbVog

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

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

来源

2016-01-19 11:21:05 Michael

通过删除可见性测试，我已经确定'$ scope。$ apply'可以做到这一点。但是，虽然菜单是可见的，选择器是正确的，但是'$ menu.is（“：visible”）'返回false，我没有得到...我最终使用了打开/关闭布尔值（它我已经保留并在范围内使用）来提供这些信息。谢谢。 – AbVog

我没有看到你的hideMenu功能，但我想，让你需要后$scope.hideMenu();

添加$scope.$apply();你的代码的工作，但这个是无棱角的方式，更好地利用这样的：

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

来源

2016-01-19 11:20:23

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

回答

相关问题