Question

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

我有一段代码示例来说明这一点。此代码只是在单击时将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()}"？在哪里编辑弹出模板以添加关闭按钮？

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

Answer 2

＆＃13;

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;
        }
      };

    }

  ]);

＆＃13;

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

＆＃13;

Link to the working example

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

Angular UI Popover关闭按钮

2 个答案: