单击弹出框和按钮时切换按钮

Question

代码在这里：https://plnkr.co/edit/ysD1JN0ELqu7ACgkkp79?p=preview

我有两个按钮。一个是 "State1"，另一个是 "State2"。

一开始是在"State2"按钮中。然后我点击 "State2" 按钮，它切换到 "State1" 按钮，同时生成弹出窗口。

我想点击"State1"按钮和弹出框，然后它会从"State1"按钮变成"State2"按钮。我使用 popover-trigger="outsideClick"，但它不起作用。请指教。谢谢

<div ng-click="Ctrl.Check = !Ctrl.Check" popover-trigger="outsideClick">
            <a ng-class="{'btn-danger': !Ctrl.Check, 'btn-default': Ctrl.Check }" confirm-link="Ctrl.deleteCurrent(Ctrl.A)" uib-popover="I appeared on focus! Click away and I'll vanish..." popover-trigger="outsideClick" popover-placement="right">
                {{ Ctrl.Check ? 'State1' : 'State2' }}
            </a>
</div>

Answer 1

您缺少 popover-trigger 中的 ''，您不需要 div 本身的第一个：

<div ng-click="Ctrl.Check = !Ctrl.Check">
        <a ng-class="{'btn-danger': !Ctrl.Check, 'btn-default': Ctrl.Check }" confirm-link="Ctrl.deleteCurrent(Ctrl.A)" uib-popover="I appeared on focus! Click away and I'll vanish..." popover-trigger="'outsideClick'" popover-placement="right">
            {{ Ctrl.Check ? 'State1' : 'State2' }}
        </a>

Answer 2

这是个笨蛋 https://plnkr.co/edit/KXWzDN882fWEByUNzks6?p=preview

我做了什么

      <a 
            ng-class="{'btn-danger': !isOpen, 'btn-default': isOpen }" 
            state-change-capture 
            confirm-link="Ctrl.deleteCurrent(Ctrl.A)" 
            uib-popover="I appeared on focus! Click away and I'll vanish..." 
            popover-trigger="'outsideClick'" 
            popover-is-open="isOpen" 
            ng-click="isOpen = !isOpen"
            popover-placement="right">
                {{ isOpen ? 'State1' : 'State2' }}
      </a>

在控制器中

$scope.isOpen = false;
$scope.$watch('isOpen', function (oldVal, newVal) {
    //just for reference in case you need to know the status of popover
  });

为 uib-popover 添加了一个属性，称为 popover-is-open="isOpen" 它告诉弹出窗口是否可见，并根据该设置状态 1 或 2

另外，如果你需要观察它，那么在控制器中添加了一个手表，以备不时之需。

单击弹出框和按钮时切换按钮

Toggle buttons when click out of popover and button

angularjs

angular-ui-bootstrap