Angular.js關閉，點擊任何地方但在元素上

Question

這很常見，比如你在這里點擊stackoverflow上的收件箱。 我會打電話給那個對話框或任何被打開的東西 。

現在有兩種方法可以解決這個問題，

1. 你創建了一個不可見的疊加層，其中只有你打開的元素有更大的zindex，你通過點擊疊加來關閉你的東西
2. 單擊文檔上的事件，然后單擊是否單擊了您的項目或其外部，在這種情況下，您關閉了您的項目 。

在任何一種情況下，我都希望使用ng-class來添加/刪除顯示/隱藏事物的類 。

現在我將如何使用angular進行此操作，因此它可以用於我可能添加的任何組件（事物）。 它不像我有單模態，我可能有不同的組件，具有不同的html結構，定位和東西。

哪種方法會更好，記錄事件，疊加或其他什么呢？

由於angular實際上並沒有對dom的任何引用，因此，文檔方法可能是個問題，因為我無法確定是否點擊了thing元素？ 除非我給所有的東西都是同一個班級..

另一方面，疊加方法不需要任何對dom元素的引用。

這兩種方法都需要在rootScope上使用一個唯一的var來使該ng-class工作..這帶來了是否使用ng-class或者自定義的問題。

無論如何只是把我的想法扔到那里，也許我從一開始就認為它是錯的，有沒有人以前處理過這個？

Answer 1

我之前處理過這樣的事情的方式是使用inheritedData與click處理程序進行通信，無論它是在事物內還是外部：

• 在事物的自定義指令中，使用jqLit​​e數據向元素添加數據變量，例如element.data('myThing',true) 。 如果要區分該事物的多個實例，則可能需要使用一些唯一生成的密鑰。

• 在同一個自定義指令中，在document.body上的單擊事件處理程序中，您可以檢查angular.element(event.target).inheritedData('myThing')

下面是使用此技術的示例指令

app.directive('thing', function($document,$window) {
  return {
    restrict: 'E',
    template: '<div><span>Inner thing</span></div>',
    replace: true,
    link: function(scope,element) {
      element.data('thing',true);

      angular.element($document[0].body).on('click',function(e) {
        var inThing =  angular.element(e.target).inheritedData('thing');
        if (inThing) {
          $window.alert('in');
        } else {
          $window.alert('out');
        }
      })
    }
  }
});

並且可以在這個Plunker中看到http://plnkr.co/edit/bRDLcLoesM7Z0BIxKxYu?p=preview