Angular UI Popover关闭按钮

Question

我已经阅读了Angular UI Bootstrap添加一个关闭按钮，并在ng-repeat中的ng-click上显示了隐藏的div 。 我想使用后一篇文章中的解决方案，并将其应用于第一篇文章中所述的问题。 本质上，我希望能够通过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代码中的任何地方找到弹出式模板。 据我所知，弹出框的创建是巫术魔术。

令人沮丧的是Angular UI Bootstrap还没有此功能。 我一直在尝试解决这个问题超过一个星期，而我所看到的每个“解决方案”似乎都不适合我。

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

Answer 1

这由@ognus在GitHub线程上解决。

他说：

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

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

我有一个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> 

链接到工作示例

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