Question

我使用的是版本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控制的。

现在行为很奇怪。如果我点击其中一个，没有任何反应。当我再次点击时，弹出窗口加载正常。当我点击另一个时，弹出消失。然后我必须再次点击另一个。

Answer 1

认为它应该有用，请检查

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

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

Answer 2

    <!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%;
}

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

2 个答案: