Angular UI 弹出窗口关闭按钮

Question

我读过 and show hidden div on ng-click within ng-repeat。我想使用后一篇文章中的解决方案并将其应用于第一篇文章中所述的问题。本质上，我希望能够使用 ng-show 或 ng-click 关闭 Angular UI Bootstrap 弹出窗口。

我有一段代码示例来说明这一点。此代码仅在单击时将 CSS class 应用于特定元素，并在再次单击时将其删除：

<div ng-class="{'gray-inset-border': style}">
    <div ng-click="style=!style"></div>
</div>

只要单击包含弹出框的元素，就会创建一个弹出框模板。在 Chrome DOM 检查器中，开始标记如下所示：

<div class="popover ng-isolate-scope right fade in"
tooltip-animation-class="fade" tooltip-classes="" 
ng-class="{ in: isOpen() }" popover-template-popup="" title="" 
content-exp="contentExp()" placement="right" popup-class=""  animation="animation" 
is-open="isOpen" origin-scope="origScope" 
style="top: 317.5px; left: 541.8125px; display: block;">

注意 ng-class="{in: isOpen()}"。我假设这控制弹出框是否打开，并希望使用与上面示例相同的 ng-click 方法，并将其应用于弹出框内的按钮。但是，当我尝试这样做时，它没有用。我也无法在 ui-bootstrap-tpls.js 代码中的任何位置找到弹出框模板。据我所知，弹出窗口的创建是巫毒魔法。

同样令人沮丧的是 Angular UI Bootstrap 还没有这个功能。一个多星期以来，我一直在断断续续地尝试解决这个问题，但我看到的每一个 "solution" 似乎都不适合我。

我对 ng-class="{in: isOpen()}" 的理解正确吗？在哪里编辑弹出框模板以添加关闭按钮？

Answer 1

@ognus 在 GitHub thread.

上解决了这个问题

他说：

I've found that using a simple custom directive worked best for my use case. I just want to be able to close the popover from within the popover template.

The directive exposes scope.toggle method that user custom trigger to open and close popover. I'm then using this method in the popover template.

There is a plnkr 是我为了测试自己的问题而改编的。解决方案涉及创建一个指令（当然）。

HTML

<!DOCTYPE html>
<html ng-app="main">

  <head>
    <script data-require="angular.js@1.x" data-semver="1.4.1" src="https://code.angularjs.org/1.4.1/angular.js"></script>
    <script data-require="ui-bootstrap@0.13.0" data-semver="0.13.0" src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.13.0.min.js"></script>
    <link data-require="bootstrap-css@*" data-semver="3.3.1" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" />
        <script src="popoverToggle.js"></script>
    <script src="script.js"></script>

  </head>

  <body style="margin: 50px">
    <!-- Show popover link -->
    <a
      href=""
      popover-placement="bottom"
      popover-trigger="open"
      popover="Lorem ipsum dolor sit amet, consectetur."
      popover-title="This is a title"
      popover-toggle>
      Show popover</a>
      
    <div popover-placement="bottom" popover-trigger="open" 
    popover-template="'popover-template.html'" popover-toggle>Show Popover 2</div>
    

  </body>
</html>

popoverToggle 指令

angular.module('main')

.config(function($tooltipProvider) {
  $tooltipProvider.setTriggers({'open': 'close'});
})

.directive('popoverToggle', function($timeout) {
  return {
    scope: true,
    link: function(scope, element, attrs) {
      scope.toggle = function() {
        $timeout(function() {
          element.triggerHandler(scope.openned ? 'close' : 'open');
          scope.openned = !scope.openned;
        });
      };
      return element.on('click', scope.toggle);
    }
  };
});

弹出框模板

<p>Are you sure you want to remove this item?</p>
<a href='' ng-click='remove(item)'>Yes</a> 
<div ng-click='toggle()'>No</div>

Answer 2

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

app.controller( 
  'dataCtrl', function() {
    var self = this;
    self.data = [
      {name: "one", num: 23},
      {name: "two", num: 87},
      {name: "three", num: 283}
    ]
    return self;
  }
)

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

      // query popover
      $scope.myPopover = {

        isOpen: false,

        templateUrl: 'myPopoverTemplate.html',

        open: function open( value ) {
          $scope.myPopover.isOpen = true;
          $scope.myPopover.data = "(" + value.num + ")";
        },

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

    }

  ]);

<body ng-app="ui.bootstrap.demo" class='container'>
  <div ng-controller='dataCtrl as dc' >
    
      <li ng-repeat="d in dc.data">
        {{d.name}}
        <a ng-controller="myPopoverCtrl"
           popover-template="myPopover.templateUrl" 
           popover-title="This is a popover" 
           popover-placement="right" 
           popover-is-open="myPopover.isOpen" 
           ng-click="myPopover.open(d)">
          pop
        </a>
      </li>
  </div>
  
  <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>

Link to the working example

这是为弹出窗口使用另一个控制器的解决方案。该控制器打开和关闭弹出框。您也可以编写指令而不是控制器。如果数据重复，它工作正常。

Angular UI 弹出窗口关闭按钮

Angular UI Popover close button

javascript

popover

angular-ui

angular-ui-bootstrap