即使将触发器设置为无，Popover AngularJs 仍然显示答案

【问题标题】：Popover AngularJs still shows even after setting its trigger to none即使将触发器设置为无，Popover AngularJs 仍然显示
【发布时间】：2022-02-06 19:36:05
【问题描述】：

第一次单击竖起大拇指时会出现“谢谢”弹出框，但即使将触发器设置为“无”，第二次单击竖起大拇指时它仍然会出现

重现步骤：

点击任意点赞，将出现“谢谢”弹出框
点击白色区域以外的任意位置以关闭“谢谢”弹出窗口
再次点击竖起大拇指，“谢谢”弹出框仍然出现

在代码中，我设置了自己的自定义指令，以有条件地设置弹出框触发器，这样当单击一次竖起大拇指时，它将弹出框触发器设置为“无”：在 Element 选项卡中检查 popover-trigger 确实设置为 none。

html中的代码：

<span ng-click="sendFeedback(false, result.id)"
      uib-popover="Thanks"
      popover-trigger="'outsideClick'"
      ...
      my-directive
      shown="this.shown[result.id]">
</span>

控制器中的代码：

feedbackApp.directive('myDirective', function () {
  return {
    restrict: 'A',
    scope: {
      shown: '=',
    },
    link: function(scope, element, attrs) {
      scope.$watch('shown', function(shown) {
          if (shown) 
              attrs.$set('popover-trigger', "none");
          }
      });
    }
  };
});

底线是如果用户打算撤消竖起的拇指，则不应出现“谢谢”弹出窗口

这是我的full code in public repo

【问题讨论】：

第一个提示：您的代码无效。它有语法错误，无法运行。
popover-trigger=" show ? 'outsideClick' : 'none'" 呢？
@svarog 这不起作用，因为popover-trigger 没有观察者。

标签： javascript angularjs angular-ui-bootstrap popover

【解决方案1】：

您尝试通过注入 attrs.$set('popover-trigger', "none") 更改 DOM，但编译的 AngularUI 模板无法识别。您可以重新编译模板，但这不是必需的。对于这种简单的要求，您的方法很复杂。只需使用popover-enable 选项，您就可以了。您无需在指令中处理此问题。也不需要 $watch。

angular.module('demoApp', ['ui.bootstrap'])
    .controller('DemoCtrl', function ($scope, $compile) {
    
    $scope.popoverState = true;
    
    $scope.clicked = function () {
        $scope.popoverState = false;
    };
    
});
/* EOF */

<link rel="stylesheet" type="text/css" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">

<script src="//code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.6/moment.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.0-rc.0/angular.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.14.3/ui-bootstrap-tpls.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-calendar/1.0.0/calendar.js"></script>


<div ng-app="demoApp">
  <div ng-controller="DemoCtrl">
     <br />
     <br />
     <br />
     <button popover-placement="top" 
        ng-click="clicked()"
        uib-popover="On the top" 
        type="button" 
        popover-enable="popoverState"
        class="btn btn-default ng-binding"
        my-directive>Popover top</button>
  </div>
</div>

【讨论】：