Angular指令，觸發範圍函數

我有一個自定義的彈出式面板，我想添加功能，以便在面板外單擊屏幕時關閉。我創建了一個指令來完成這個任務，但是我很難說明關閉事件發生了。Angular指令，觸發範圍函數

<div ng-if="ui.showConfig" auto-hide="ui.showConfig=false">...</div>

myApp.directive('autoHide', 
    [function() { 
     return { 
      restrict: 'A', 
      scope: { 
       'autoHide': '&' 
      }, 
      link: function (scope, element, attrs) { 
       var $overlay = $("<div style='position:absolute;top:0;left:0;width:100%;height:100%;z-index:2000;'>"); 
       $overlay 
        .appendTo("body") 
        .one("click", function(e){ 
         element.hide(); 
         $overlay.unbind().remove(); 
         // This is not firing... 
         // scope.autoHide(); 
        }); 

       element.css("zIndex", "2001"); 

       element.on('$destroy', function() { 
        $overlay.unbind().remove(); 
       }); 
      } 
     }; 
    }]);

Here is a jsfiddle

疊加點擊事件被觸發。該小組正在隱藏。但是ui.showConfig未設置爲false，導致用戶下次按兩次以打開面板。

此外，如果有另一種方法，我應該考慮請讓我知道！

來源

2014-08-28 Malk

您可以發佈在plunker你的代碼？ – PSL 2014-08-28 19:09:57

裏面你需要調用scope.$apply()使角被告知改變的事件處理程序：

// This is not firing... 
scope.autoHide(); 
scope.$apply();

來源

2014-08-28 20:17:36 zeroflagL

完美，這正是我需要的！ – Malk 2014-08-28 21:33:40

我想在第一個建議您不要使用jQuery的DOM中多餘的元素或別的東西追加的，也是我想建議使用已經建立angular bootstrap modal 它將給你更多的優勢。您可以檢查鏈接並查看示例以及如何將模塊包含在項目中。我非常確定彈出式bootstrap mpodal所需的所有功能。

來源

2014-08-28 19:10:04

我確實嘗試了你的jsfiddle和http://jsfiddle.net/yke1pm7g/1/顯然事件發生了，但是我不明白scope.autoHide()是怎麼回事？

來源

2014-08-28 19:23:35 vertazzar

Angular指令，觸發範圍函數

回答

相關問題