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指令，触发范围函数

回答

相关问题