Angular UI Popover 关闭按钮答案

【问题标题】：Angular UI Popover close buttonAngular UI Popover 关闭按钮
【发布时间】：2015-12-01 11:32:47
【问题描述】：

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

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

<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 代码的任何地方找到弹出框模板。据我所知，popover 的创建是巫术魔法。

同样令人沮丧的是，Angular UI Bootstrap 还没有这个功能。一个多星期以来，我一直试图断断续续地解决这个问题，而我看到的每一个“解决方案”似乎都对我不起作用。

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

【问题讨论】：

你有问题吗？

标签： javascript angular-ui angular-ui-bootstrap popover

【解决方案1】：

@ognus 在GitHub thread 上解决了这个问题。

他说：

我发现使用简单的自定义指令最适合我的用例。我只是希望能够从弹出框模板中关闭弹出框。

该指令公开了用户自定义触发器以打开和关闭弹出框的 scope.toggle 方法。然后我在弹出框模板中使用此方法。

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>

【讨论】：

【解决方案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

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

【讨论】：