popover-trigger angular bootstrap不会触发popover

时间:2017-03-23 09:00:58

标签: angularjs angular-ui-bootstrap popover

我试图在角度中使用uib-popover,如下所示

html模板

          <form id="methodform" style="font-size:large;font-family:'merriweatherregular';color:#2c3e4c">
        <label><input type="radio" ng-model="methodname" value="method1">
          method1&nbsp;
          <i title="show info" class="fa fa-info-circle"
           aria-hidden="true" ng-click="getMethodInfo(1)"
          uib-popover-template="dynamicPopover.templateUrl" popover-placement="right"
          popover-title="{{dynamicPopover.title}}" popover-trigger="'click outsideClick'"></i></label></br>
        <label><input type="radio" ng-model="methodname" value="method2">
          method2&nbsp;
          <i title="show info" class="fa fa-info-circle"
           aria-hidden="true" ng-click="getMethodInfo(2)"
           uib-popover-template="dynamicPopover.templateUrl" popover-placement="right"
           popover-title="{{dynamicPopover.title}}"></i></label></br>
        <label><input type="radio" ng-model="methodname" value="method3">
          method3&nbsp;
          <i title="show info" class="fa fa-info-circle"
           aria-hidden="true" ng-click="getMethodInfo(3)"
           uib-popover-template="dynamicPopover.templateUrl" popover-placement="right"
           popover-title="{{dynamicPopover.title}}"></i></label></br>
      </form>

<script type="text/ng-template" id="myPopoverTemplate.html">
    <div>{{dynamicPopover.content}}</div>
</script>

控制器:

   $scope.getMethodInfo = function(methodId){
     if(methodId==1){
       $scope.dynamicPopover.title = 'Method 1'       
     }else if(methodId==2){
       $scope.dynamicPopover.title = 'Method 2'
     }else{
       $scope.dynamicPopover.title = 'Method 3'
     }
   }

   $scope.dynamicPopover = {
    content: 'Some details about this method',
    templateUrl: 'myPopoverTemplate.html'
  };

我遇到关闭popover的问题。当我使用popover-trigger属性时,popover不会显示。但是当我删除该属性时它会起作用。我想在用户点击页面上的任意位置时关闭弹出框。我无法找到解决此问题的方法。请帮忙。 提前谢谢。

1 个答案:

答案 0 :(得分:1)

您应该从click属性中删除popup-trigger值。

只试用popover-trigger="'outsideClick'"