仅使用AngularJs在元素外部单击时如何关闭元素？答案

【问题标题】：How to close element when click outside the element using AngularJs Only?仅使用AngularJs在元素外部单击时如何关闭元素？
【发布时间】：2016-04-11 10:39:59
【问题描述】：

这是我的代码

$scope.searchHide = function() {
  $scope.selectMenuSetting = "SearchPanel";
  $scope.secondPanelShow = !$scope.secondPanelShow;
  $scope.secondColumn = false;
};

$scope.showSearchPopUp = function() {
  $scope.selectMenuSetting = "SearchPopUp";
  $scope.secondColumn = !$scope.secondColumn;
  $scope.secondPanelShow = false;
};

<div class="tab-panel">
  <a href="" class="second-panel-search" click-anywhere-but-here ng-click="searchHide()"><i class="nc-icon-mini ui-1_zoom" ng-class="{'active': selectMenuSetting === 'SearchPanel'}"></i></a>
  <a href="" class="second-panel-search" click-anywhere-but-here ng-click="showSearchPopUp()"><i class="nc-icon-mini ui-3_select" ng-class="{'active': selectMenuSetting === 'SearchPopUp'}"></i></a>
</div>

<div class="second-search-hide-panel padt5" ng-if="secondPanelShow">
  <div class="second-search-input ">
    <input type="text" placeholder="text" ng-model="searchText" ng-change="refreshData(searchText)"><i class="nc-icon-mini ui-1_zoom active"></i>
  </div>
</div>

<div class="second-search-hide-panel" ng-if="secondColumn">
   <div class="second-search-input" ng-if="showObjectTypes">
  <div class="second-search-input">
            <label class="control-label">Type</label>
            <select class="form-control" ng-model="objectType" ng-change="callingGetData(objectType)">
              <option value="major">Major Objects</option>
              <option value="support">Supporting Objects</option>
              <option value="lookup">LookUp Objects</option>
           </select>
  	  </div>
   </div>
</div>

在上面的代码中包含两个锚标记。当我单击第一个锚标记显示搜索文本字段时，单击第二个锚标记显示下拉菜单。但是，当我在元素外部单击时，我想使用 AngularJS 隐藏锚标记而不使用 jQuery。

【问题讨论】：

我在使用 popover 时遇到了这样的问题。我的解决方案是在正文中添加一个属性（排除），然后在我的元素中我正在检查 click 元素上是否有排除属性
所以你想在失去焦点的时候做点什么，对吧？这是 ng-blur 的指令。

标签： javascript html angularjs

【解决方案1】：

这需要元素上的 ng-blur 指令，虽然我不确定你为什么只想使用 Angular...

【讨论】：