角UI引導酥料餅的行爲不觸發正確

我使用的版本0.14.1和我的代碼是：角UI引導酥料餅的行爲不觸發正確

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

這樣的想法是，你可以在任何跨度點擊，它應該加載相應popover，但一次只能打開一個popover。這由filterSelected控制。

現在的行爲很奇怪。如果我點擊其中一個，沒有任何反應。當我再次點擊時，popover加載正常。當我點擊另一個時，popover消失。然後我必須再次點擊另一個。

來源

2017-06-20 Shamoon

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

來源

2017-07-18 12:29:39

COPIA李回答的更擴展版本： - 如果點擊兩次或按鈕外部，彈出窗口將關閉。實時預覽 - http://plnkr.co/edit/hoObbom50FE3hJlZBaUb –

認爲它應該工作，檢查

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

確保當你點擊你的標籤真的點擊和跨度之間的不佔空間

來源

2017-06-20 03:55:00

角UI引導酥料餅的行爲不觸發正確

回答

相關問題