AngularJS弹出框：鼠标移出时隐藏弹出框模板答案

【问题标题】：AngularJS popover: hide popover template on mouse outAngularJS弹出框：鼠标移出时隐藏弹出框模板
【发布时间】：2021-11-29 20:11:54
【问题描述】：

我正在使用 AngularJS 的 ui-bootstrap 模块。这是我的标记：

<button class="btn btn-default btn-sm" type="button"
    popover-template="dynamicPopover.templateUrl"
    popover-trigger="click" id="custom_overview"
    popover-placement="bottom">Custom</button>

这是我的控制器：

$scope.dynamicPopover = {
    templateUrl : '../static/templates/popup-templates/datepicker.html'
};

这是我的弹出框模板：

<div class="row" id="datepicker-container">
    <div class="col-sm-12 clearfix">
        <div class="col-sm-12">
            <span class="heading">From:</span>
            <input ng-model="timedata.fromDate" type="text" id="fromDate"
                class="form-control" datepicker-popup="dd-MM-yyyy"
                is-open="fromOpen.isOpen" ng-click="fromOpen.isOpen = true" placeholder="dd-mm-yyyy">
        </div>
        <div class="col-sm-12" style="margin-top:5px">
            <span class="heading">To:</span>
            <input ng-model="timedata.toDate" type="text" id="toDate"
                class="form-control" datepicker-popup="dd-MM-yyyy"
                is-open="toOpen.isOpen" ng-click="toOpen.isOpen = true" placeholder="dd-mm-yyyy">
                <div class="error"
                    ng-show="timedata.toDate <= timedata.fromDate && timedata.fromDate && timedata.toDate">
                    <span>'To' date cannot be less than 'From' date.</span>
                </div>
        </div>
    </div>
    <div class="col-sm-12" id="submit-button">
        <button class="btn btn-primary" ng-click="setInterval('custom')"
            ng-disabled="timedata.toDate <= timedata.fromDate || !timedata.toDate || !timedata.fromDate">
            Submit
        </button>
    </div>
</div>

如您所见，我正在使用包含表单的弹出框模板填充弹出框。这是屏幕截图：

当我单击“自定义”按钮时，会打开此弹出窗口。现在，当我将鼠标从模板和“自定义”选项卡上移开时，我希望隐藏此弹出框。我该怎么做？

【问题讨论】：

但是当您单击“自定义”选项卡时，鼠标不会在模板上方...
好的，那么当它远离“自定义”标签和模板时隐藏它？
我知道这是一个老话题，但如果有人被困在这个或任何类似的问题上，这里是简单的 angularjs popover 示例：plnkr.co/edit/IkZ0GVVkZCkvugyvrHFB?p=preview

标签： javascript angularjs angular-ui-bootstrap popover

【解决方案1】：

简而言之，将 popover-trigger="click" 替换为 popover-trigger="'mouseleave : click'" 应该适合您。

如需更多了解，根据 uib-popover documentation，popover 打开和关闭触发器都将默认启用 popover-trigger 属性（仅当您想在同一事件上关闭和打开时）。

例如：

popover-trigger="'mouseenter'" 默认情况下应该在 mouseover 时打开 popover 并在 mouseleave 时关闭 popover
popover-trigger="'click'" - 点击时会显示和隐藏
在您的情况下（显示和关闭不同的事件），popover-trigger 属性应该包含这两个事件才能工作。

popover-trigger="'mouseleave : click'" 这应该可以。这里第一个和第二个值分别代表隐藏和显示触发器。

【讨论】：