CODEWITHSUNDEEP
angularjsangular-ui-bootstrappopover
Shamoon
Shamoon

Reputation: 43501

angular-ui bootstrap popover behavior is not triggering properly

I'm using version 0.14.1 and my code is:

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

So the idea is that you can click on either span and it should load the appropriate popover, but only one popover can be opened at a time. That's being controlled by filterSelected.

Now the behavior is strange. If I click on one of them, nothing happens. When I click again, the popover loads fine. When I click the other one, the popover disappears. Then I have to click the other one again.

Upvotes: 0

Views: 523

Answers (2)

Ravi Ranjan
Ravi Ranjan

Reputation: 84

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

Upvotes: 1

copia li
copia li

Reputation: 318

Think it should work, check 

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

Make sure when you click you really click on tag a not the space between a and span

Upvotes: 1

Related Questions