即使将其触发器设置为 none，弹出窗口 AngularJs 仍然显示

Question

第一次点赞时出现'Thanks'弹窗，但第二次点赞时即使将触发器设置为'none''none'仍会出现'Thanks' =16=]

重现步骤：

点击任何竖起大拇指，'Thanks' 弹出窗口将出现
单击外部的任何地方（例如白色区域）以关闭 'Thanks' 弹出窗口
再次点击竖起大拇指，'Thanks' 弹出窗口仍然出现

在代码中，我设置了自己的自定义指令以有条件地设置弹出窗口触发器，这样当单击一次竖起大拇指时，它会将弹出窗口触发器设置为 'none'：在元素选项卡中检查 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");
          }
      });
    }
  };
});

底线是如果用户打算撤消竖起大拇指，'Thanks' 弹出窗口不应出现

这是我的 full code in public repo

Answer 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>

即使将其触发器设置为 none，弹出窗口 AngularJs 仍然显示

Popover AngularJs still shows even after setting its trigger to none

javascript

popover

angularjs

angular-ui-bootstrap