Angular UI Bootstrap Popover - How add a close but

2020-05-20 05:06发布

站内问答 / 后端开发
673 3 6

I've a table with a popover for every cell as in the follow example:

the call to popover:

<td ng-repeat="i in c.installments" ng-class="{ 'first' : i.first, 'last' : i.last, 'advance' : i.advance.value > 0, 'edited' : i.edited, 'final-installment' : i.last }" popover-trigger="{{ popoverFilter(i) }}" popover-placement="top" popover-title="{{i.id == 0 ? 'Advance' : 'Installment ' + i.id}}" popover-append-to-body="true" popover-template="popoverTemplate(i)" ng-init="payment= i; newpayment= i.amount.rounded_value" >

The popover template:

<script type="text/ng-template" id="editPopoverTemplate.html">
    <form name="editPayment">
      <h2>{{payment.amount.value|currency:undefined:cents}}</h2>
      <div class="form-group" ng-class="{ 'has-error' : editPayment.newpayment.$invalid }">
        <label>New value:</label>
        <input type="number" name="newpayment" ng-model="newpayment" class="form-control no-spinner" step="1" min="10" required>
        <span ng-messages="editPayment.newpayment.$error" class="help-block" role="alert">
          <span ng-message="required">The value is mandatory</span>
          <span ng-message="min">The value is too low</span>
          <span ng-message="max">The value is too hight</span>
        </span>
      </div>
      <div class="btn-group btn-group-justified" role="group">
        <div class="btn-group" role="group">
          <button class="btn" type="button">Cancel</button>
        </div>
        <div class="btn-group" role="group">
          <button class="btn btn-primary" type="button" ng-disabled="editPayment.$invalid">Save</button>
        </div>
      </div>
    </form>
  </script>

working example on plunker

I need to close the popover via a "Cancel" button inside the popover. It's possible? I need to extend the Angular UI Bootstrap library to do that?

Any help is appreciated.

The solution suggested in the linked answer close the popover when user click inside the popover, or outside the popover, but i need to close it by "close" button inside the popover.

3条回答
我命由我不由天
2楼-- · 2020-05-20 05:26

Starting with Angular UI Bootstrap release 0.13.4, we've added the ability to programmatically close tooltips and popovers via the tooltip-is-open or popover-is-open boolean attribute.

查看更多
0人赞 添加讨论(0) 举报
太酷不给撩
3楼-- · 2020-05-20 05:31

The proper solution using the new popover-is-open attribute, as mentioned by @icfantv below, allows the use of controller scopes. I placed a live example in Codepen, and it goes like this:

app = angular.module('ui.bootstrap.demo', ['ui.bootstrap']);

app.controller(
  'myPopoverCtrl', ['$scope',
    function($scope) {

      // query popover
      $scope.myPopover = {

        isOpen: false,

        templateUrl: 'myPopoverTemplate.html',

        open: function open() {
          $scope.myPopover.isOpen = true;
          $scope.myPopover.data = 'Hello!';
        },

        close: function close() {
          $scope.myPopover.isOpen = false;
        }
      };

    }

  ]);
<head>

  <script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
  <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
  <script src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.13.4/ui-bootstrap-tpls.min.js">
  </script>
  <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">

</head>

<body 
      ng-app="ui.bootstrap.demo" 
      class="container">

  <button 
          class="btn btn-danger" 
          ng-controller="myPopoverCtrl" 
          popover-template="myPopover.templateUrl" 
          popover-title="This is a popover" 
          popover-placement="bottom" 
          popover-is-open="myPopover.isOpen" 
          ng-click="myPopover.open()">Click me!</button>

  <script type="text/ng-template" 
          id="myPopoverTemplate.html">
    <h2 ng-bind="myPopover.data" />
    <button class="btn btn-success" 
            ng-click="myPopover.close()">Close me!</button>

  </script>

</body>

Original answer:

I spent the last two days on this problem, and finally came up with a simple enough hack. This goes on my controller:

 $scope.close = function(e) {
     el = angular.element(e.target).closest("td"); // `td` is the parent of my clickable
                                                   // element, in this case a `span`
     $timeout(function() { // need $timeout so we don't conflict with the digest loop
     el.children(":first").trigger('close'); // couldn't select the `span` element directly
     });
 },

Now we set up the close trigger on the provider:

app.config(['$tooltipProvider', function($tooltipProvider){
  $tooltipProvider.setTriggers({
    'click': 'close', // Clicks now only open the tooltip, 'close' events close it.
  });
}]);

And on my custom popover HTML template:

<button type="button" 
        class="btn btn-sm btn-success pull-right" 
        ng-click="close($event)">Close</button>

Voila! I can now close the popover through the button!

查看更多
0人赞 添加讨论(0) 举报
forever°为你锁心
4楼-- · 2020-05-20 05:40

This solution for several ng-repeat popovers via isOpen field of popover's scope.

angular.module('ui.bootstrap.demo', ['ui.bootstrap']).controller('PopoverDemoCtrl', function ($scope) {  
  $scope.template = 'myPopoverTemplate.html';
  $scope.close = function(e) {    
    angular.element(e.target).parent().parent().parent().parent().scope().$parent.isOpen = false;
  }
});
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.js"></script>
<script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-2.5.0.js"></script>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">

<body ng-app="ui.bootstrap.demo">
<div ng-controller="PopoverDemoCtrl">
    <button ng-repeat="item in ['First Popover','Second Popover','Third Popover']" popover-placement='bottom' uib-popover-template="template" popover-title="{{item}}" type="button" class="btn btn-default">{{item}}</button>  
    <script type="text/ng-template" id="myPopoverTemplate.html">        
        <div class="form-group">
          <button class='btn btn-danger' ng-click='close($event)'>Close Me</button>
        </div>
    </script>
</div>
</body>

查看更多
0人赞 添加讨论(0) 举报
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(6)