编辑：
柱塞演示这是它的工作方式（仍然漫长而详尽的解释）：- 创建一个自定义指令，使您可以定位触发元素。
- 创建一个添加到主体的自定义指令，它将找到触发元素，并在单击该事件时触发该自定义事件。
您需要从打开d出窗口的元素中触发自定义事件处理程序（在演示中，这是按钮）。面临的挑战是将d出框作为同级元素添加到此元素中，并且我始终认为，当您遍历DOM并期望它具有特定的结构时，事情更有可能被打破。有几种方法可以将trigger元素作为目标，但是我的方法是在单击该元素时向该元素添加一个唯一的类名（我选择“
trigger”）。在这种情况下，一次只能打开一个d出窗口，因此使用类名是安全的，但是您可以根据自己的喜好进行修改。
自定义指令
app.directive('popoverElem', function(){ return{ link: function(scope, element, attrs) { element.on('click', function(){ element.addClass('trigger'); }); } }});应用于按钮
<button popover-template="dynamicPopover.templateUrl" popover-title="{{dynamicPopover.title}}" popover-elem>Popover With Template</button>最后一步是创建一个自定义指令，该指令将定位触发元素并触发自定义事件，以在单击应用于该元素的元素时关闭d出窗口。当然，您必须从“触发”元素中排除初始单击事件，并在d出框内部排除所有要与之交互的元素。因此，我添加了一个名为exclude-class的属性，因此您可以定义一个可以添加到其click事件应忽略的元素上的类（不会导致d出窗口关闭）。
为了清理问题，当触发事件处理程序时，我们将删除添加到trigger元素的trigger类。
app.directive('popoverClose', function($timeout){ return{ scope: { excludeClass: '@' }, link: function(scope, element, attrs) { var trigger = document.getElementsByClassName('trigger'); function closeTrigger(i) { $timeout(function(){angular.element(trigger[0]).triggerHandler('click').removeClass('trigger'); }); } element.on('click', function(event){ var etarget = angular.element(event.target); var tlength = trigger.length; if(!etarget.hasClass('trigger') && !etarget.hasClass(scope.excludeClass)) { for(var i=0; i<tlength; i++) { closeTrigger(i) } } }); } };});我将其添加到body标记中，以便整个页面*成为d出窗口的可忽略背景：
<body popover-close exclude->
并且，我将排除类添加到了d出框的输入中：
<input type="text" ng-model="dynamicPopover.title" >
因此，有一些调整和陷阱，但我将留给您：
- 如果未定义，则应在popover-close指令的链接函数中设置默认的排除类。
- 您需要注意popover-close指令是元素绑定的，因此，如果删除我在html和body元素上设置的样式以使其具有100％的高度，则如果内容不包含在视口中，则可能存在“死区”填补它。
在Chrome，Firefox和Safari中进行了测试。
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）