angular-ui bootstrap popover 行为未正确触发答案

【问题标题】：angular-ui bootstrap popover behavior is not triggering properlyangular-ui bootstrap popover 行为未正确触发
【发布时间】：2017-06-20 02:17:18
【问题描述】：

我使用的是 0.14.1 版本，我的代码是：

        <div class="clearfix mbot20">
          <h3 class="pull-left">Skill Category SORT: {{filterSelected}}</h3>
          <span class="pull-right pathways-modal-popover-container">
            <span class="sm-round-btn" popover-placement="bottom" uib-popover-template="data.sortUrl" popover-trigger="'none'" tabindex="0" popover-is-open="filterSelected === 'sort'">
              <a class="clr-white" ng-click="filterSelected = 'sort'"><i class="glyphicon glyphicon-sort"></i></a>
            </span>
            <span class="sm-round-btn" popover-placement="bottom" uib-popover-template="data.filterUrl" popover-trigger="'none'" tabindex="0" popover-is-open="filterSelected === 'filter'">
              <a class="clr-white" ng-click="filterSelected = 'filter'"><i class="glyphicon glyphicon-filter"></i></a>
            </span>
          </span>
        </div>

所以想法是您可以单击任一跨度，它应该加载适当的弹出框，但一次只能打开一个弹出框。这是由filterSelected 控制的。

现在的行为很奇怪。如果我单击其中一个，则不会发生任何事情。当我再次单击时，弹出框加载正常。当我单击另一个时，弹出框消失了。然后我必须再次单击另一个。

【问题讨论】：

标签： angularjs angular-ui-bootstrap popover

【解决方案1】：

    <!doctype html>
    <html ng-app="ui.bootstrap.demo">

    <head>
      <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.js"></script>
      <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular-animate.js"></script>
      <script src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.14.1.js"></script>
      <script src="example.js"></script>
      <link href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">
      <link href="style.css" rel="stylesheet">
    </head>

    <body ng-controller="PopoverDemoCtrl" ng-click="filterSelected='none'" style="height: 100%;">
      <div>
        <button popover-placement="bottom" uib-popover="On the Top!" type="button" popover-is-open="filterSelected === 'sort'" popover- trigger="'none'" ng-click="filterSelected == 'sort' ? filterSelected = 'none' : filterSelected = 'sort';$event.stopPropagation();"
        class="btn btn-default">Top</button>
        <button popover-placement="bottom" uib-popover="On the Bottom!" type="button" class="btn btn-default" popover-trigger="'none'" popover-is-open="filterSelected === 'filter'" ng-click="filterSelected == 'filter' ? filterSelected = 'none' : filterSelected = 'filter';$event.stopPropagation();">Bottom</button>
      </div>
    </body>

    </html>

    angular.module('ui.bootstrap.demo', ['ngAnimate', 'ui.bootstrap']);
    angular.module('ui.bootstrap.demo').controller('PopoverDemoCtrl', function ($scope) {
      $scope.dynamicPopover = {
        content: 'Hello, World!',
        templateUrl: 'myPopoverTemplate.html',
        title: 'Title'
      };
    });

/* Styles go here */
html, body {
  height: 100%;
}

【讨论】：

copia li 答案的更扩展版本：- 如果单击两次或在按钮之外，弹出窗口将关闭。实时预览 - plnkr.co/edit/hoObbom50FE3hJlZBaUb

【解决方案2】：

认为它应该可以工作，检查

`http://plnkr.co/edit/dnuP47muv2OSxYXjqtc2?p=preview`

确保当你点击时你真的点击了标签 a 而不是 a 和 span 之间的空格

【讨论】：