如何在 Angularjs 函数中使用 Popover

Posted 2023-05-09

【中文标题】如何在 Angularjs 函数中使用 Popover

【英文标题】：How to use Popover inside a Angularjs function

【发布时间】：2016-02-08 05:08:33

【问题描述】：

我的问题非常奇怪和独特。我会尽力在这里解释我的情况。

我有一个表单验证。一旦用户填写表格并选择添加按钮，它允许添加前 6 次。第 6 次提交后，添加按钮被禁用，不允许用户进一步添加。

这里是添加按钮功能

$scope.addItem = function () 
    $scope.items.push($scope.activeItem);



    if ($scope.items.length > 6) 
        $scope.disableAdd = true
     // here is the code below where i want to insert my popover function.
    

谁能告诉我如何在运行时插入这样的弹出框。请注意：我不想在页面加载和用户选择按钮时立即显示弹出框。我只想在用户提交 6 个表单后显示它。 $scope.items.length中显示用户提交的次数

我只想向用户显示一些他无法再添加的内容。我尝试使用模态，但我认为 popover 会好得多。欢迎任何建议.....

【问题讨论】：

你说的是 ui-bootstrap 弹出框吗？

如果您只是在讨论禁用按钮，您只需在按钮的 html 中添加 ng-disabled="disableAdd"。

@djvs- 是的，确实如此。顺便说一句，禁用工作正常。我需要向用户显示通知之类的东西。

【参考方案1】：

有很多方法可以做到这一点。如果您的弹出框静态存在于 dom 中，您可以使用与 ng-if 指令禁用按钮相同的范围布尔值来触发它：

<div class="popover" ng-if="disabledAdd">No more forms allowed<div/>

【讨论】：

如果你使用 angular-ui bootstrap 之类的东西，popover 指令上有一个属性：popover-is-open。所以你可以做 popover-is-open="disabledAdd"