Angular UI Bootstrap Popover - 如何添加关闭按钮 [英] Angular UI Bootstrap Popover - How add a close button

问题描述

我有一个表格，每个单元格都有一个弹出框，如下例所示:

对弹出框的调用:

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

弹出框模板:

plunker 工作示例

我需要通过弹出框内的取消"按钮关闭弹出框.这是可能的?我需要扩展 Angular UI Bootstrap 库才能做到这一点?

感谢任何帮助.

当用户在弹出框内或弹出框外单击时，链接答案中建议的解决方案关闭弹出框，但我需要通过弹出框内的关闭"按钮关闭它.

解决方案

使用新的 popover-is-open 属性的正确解决方案，正如下面@icfantv 提到的，允许使用控制器范围.我在 Codepen 中放置了一个实例，它是这样的:

app = angular.module('ui.bootstrap.demo', ['ui.bootstrap']);应用程序控制器('myPopoverCtrl', ['$scope',功能($范围){//查询弹出框$scope.myPopover = {isOpen: 假，templateUrl: 'myPopoverTemplate.html',打开:函数打开(){$scope.myPopover.isOpen = true;$scope.myPopover.data = '你好！';},关闭:函数关闭(){$scope.myPopover.isOpen = false;}};}]);

<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"><link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"><身体ng-app="ui.bootstrap.demo"类=容器"><按钮class="btn btn-danger"ng-controller="myPopoverCtrl"popover-template="myPopover.templateUrl"popover-title="这是一个弹出框"popover-placement="底部"popover-is-open="myPopover.isOpen"ng-click="myPopover.open()">点击我！</button><script type="text/ng-template"id="myPopoverTemplate.html"><h2 ng-bind="myPopover.data"/><button class="btn btn-success"ng-click="myPopover.close()">关闭我！</button>

<小时>

原答案:

我在这个问题上花了两天时间，终于想出了一个足够简单的 hack.这在我的控制器上进行:

 $scope.close = function(e) {el = angular.element(e.target).closest("td");//`td` 是我的可点击对象的父级//元素，在本例中为 `span`$timeout(function() {//需要 $timeout 所以我们不会与摘要循环发生冲突el.children(":first").trigger('close');//不能直接选择`span`元素});},

现在我们在提供者上设置关闭触发器:

app.config(['$tooltipProvider', function($tooltipProvider){$tooltipProvider.setTriggers({'click': 'close',//点击现在只打开工具提示，'close' 事件关闭它.});}]);

在我的自定义 popover HTML 模板上:

瞧！我现在可以通过按钮关闭弹出框了！

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.

解决方案

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!

这篇关于Angular UI Bootstrap Popover - 如何添加关闭按钮的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！