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

這是非常普遍的事情，就像在這裏點擊收件箱在stackoverflow上一樣。我會打電話給那個對話框，或者打開一個的東西。Angular.js關閉並點擊任何地方，但在元素上

現在有兩個方法，我所知道的解決這個問題，

創建，你只開了元素有較大的Z-索引一種無形的疊加，而你通過點擊關閉事情覆蓋
單擊文檔上的事件，並且您檢查是否點擊了您的事物還是外部事件，在這種情況下，您關閉了事件。

在這兩種情況下，我非常喜歡用ng-class添加/刪除類，將顯示/隱藏事情。

現在我該如何做到這一點與角度，所以它可以用於任何組件（東西），我可能會添加。這不像我有單一的模式，我可能有不同的組件，具有不同的html結構，定位和東西。

哪種方法會更好，文檔事件，覆蓋或其他什麼東西？

由於angular並沒有真正引用dom，所以文檔方法可能是個問題，對，因爲我無法完全檢查是否點擊了thing元素？除非我給每東西同一類。

另一方面，疊加方法不需要任何參考dom元素。

這兩種方法都需要在rootScope獨特的VAR爲ng-class工作..這帶來的問題是使用ng-class或定製的東西..

反正只是扔我的想法在那裏，也許我想關於它從一開始就錯了，有沒有人處理過這個？

來源

2014-01-27 foxx

看看這個可以看出，它可以幫助你http://fundoo-solutions.github.io/angularjs-modal-service/ – Misters

我會去一個自定義指令，並在文檔上單擊事件。 –

你怎麼知道它不應該在點擊事物元素時關閉？永遠同一班？沒有任何一種DOM對角度方式進行搜索？ – foxx

我使用inheritedData溝通，單擊處理程序無論是在或出了事情才解決了這樣的事情的方式：

在對事物的定製指令，添加數據變量元素，使用jqLite數據，說element.data('myThing',true)。如果您想區分該事物的多個實例，則可能需要使用一些唯一生成的密鑰。
在相同的自定義指令中，在文檔上的單擊事件處理程序中。身體，你可以檢查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

來源

2014-01-27 19:41:11

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

回答

相關問題