Angularjs 寻找；“角度方式”；单击页面时关闭打开菜单的方法_Angularjs

Angularjs 寻找；“角度方式”；单击页面时关闭打开菜单的方法

angularjs

Angularjs 寻找；“角度方式”；单击页面时关闭打开菜单的方法,angularjs,Angularjs,这就是我所拥有的，它可以工作（谢天谢地，angular在jQuery加载时支持开箱即用）……但我想知道“angular方式”是如何实现这一点的如果单击页面上的任何其他位置，我想关闭“打开”菜单，但菜单： <body ng-click="onClickPage($event)"> //app controller: $scope.onClickPage = function(e){ $log.log(e); $rootScope.$broadcast('clic

这就是我所拥有的，它可以工作（谢天谢地，angular在jQuery加载时支持开箱即用）……但我想知道“angular方式”是如何实现这一点的

如果单击页面上的任何其他位置，我想关闭“打开”菜单，但菜单：

<body ng-click="onClickPage($event)">


//app controller:

$scope.onClickPage = function(e){
    $log.log(e);
    $rootScope.$broadcast('click:page', e);
};

//navbar controller

$rootScope.$on('click:page', function(ev, e){
    var $el = $(e.target);

    if ( !$el.parents('.menu').length && !$el.hasClass('.menu') ) {
        $log.log('hide dropdown');
        $scope.hideDropdown();
    }
});


//应用程序控制器：
$scope.onClickPage=函数（e）{
$log.log（e）；
$rootScope.$broadcast（'单击：第页'，e））；
};
//导航条控制器
$rootScope.$on（'click:page'，函数（ev，e）{
变量$el=$（即目标）；
if（！$el.parents（'.menu'）.length&！$el.hasClass（'.menu'））{
$log.log（'hide dropdown'）；
$scope.hideDropdown（）；
}
});

这可能取决于下拉列表的实现方式，但一般的想法是在打开/关闭下拉列表时将click事件处理程序绑定/取消绑定到$document

通过这种方式，当下拉列表未打开时，它不会处理全局事件侦听器和$rootScope

function onDocumentClicked(e) {
  var dropdownEl = angular.element('.dropdown');
  if (e && dropdownEl && dropdownEl[0].contains(e.target)) {
      return; // do nothing if clicked inside the dropdown
  }

  closeDropdown();
  $scope.$apply();
}

function openDropdown() {
  if (!$scope.dropdown.isOpen) {
    $scope.dropdown.isOpen = true;
    $document.bind('click', onDocumentClicked);
  }
}

function closeDropdown() {
  if ($scope.dropdown.isOpen) {
    $document.unbind('click', onDocumentClicked);
    $scope.dropdown.isOpen = false;
  }
}

有关完整示例，请参见：

另外，

$document

是全局文档还是我需要注入它？您需要注入。顺便说一句，它相当于

angular.element（window.document）

。