2014-10-29 55 views
0

我正在使用angular-ui-router應用程序處理angular.js。偵聽文檔單擊事件的指令在創建後立即被觸發

我在我的應用程序模仿一種彈出的狀態。

我創建了一個指令,負責將應用移動到不同的狀態,當有人點擊彈出元素之外。

我創建了一個js.fiddle我的代碼: http://jsfiddle.net/lobengula3rd/1e908559/8/

狀態1 - 爲彈出狀態。

狀態2 - 是一個不同的狀態。

我在狀態2,當點擊它將使狀態狀態變爲1(彈出狀態)的鏈接:

<a ui-sref="state1">state1</a> 

這是我的指令代碼:

.directive('closeOnOuterClick', ['$document', '$state', function ($document, $state) { 
     return { 
      restrict: 'A', 
      link: function (scope, element, attributes) { 

       $document.on("click", function (evt) { 
         $document.off('click'); 
         $state.go(attributes['closeOnOuterClick']); 
       }); 

       element.on("click", function (evt) { 
        evt.stopPropagation(); 
       }); 

      } 
     }; 
    }] 

的問題在於,由於某種原因,在創建popup元素後,'document.on'click事件的偵聽器函數立即被觸發,從而將我拋出。 我不明白爲什麼函數立即被調用。

如果我在我的控制器(第20行)上的應用程序開始我會去狀態1,而不是狀態2改變,它會工作得很好,第一次。

我試圖改變這種改變狀態的NG-click事件,這將調用一個函數在我的控制器的聯繫,但也沒有工作。

我的代碼有什麼問題?

回答

1

我想通這個問題。

我有角的UI路由器版本0.2.0。更新到版本0.2.11解決了這個問題,原因不明。

如果我改變鏈接爲ng-click而不是ui-sref調用最終會改變狀態的函數,那麼您應該直接調用$ event(angular object)stop傳播,如下所示:

state1

-1

你有沒有試過把指令裏面的$文件改成元素?線28

element.on("click", function (evt) { 
      $document.off('click'); 
      $state.go(attributes['closeOnOuterClick']); 
}); 

,在搗鼓我的作品:http://jsfiddle.net/1e908559/10/

+0

這不會幫助我。我想把數據放在彈出窗口中。 我只需要點擊彈出窗口外部的關閉 – lobengula3rd 2014-10-29 16:54:48

相關問題