Angular UI Popover關閉按鈕

我讀過Angular UI Bootstrap adding a close button和show hidden div on ng-click within ng-repeat。我想使用後一篇文章中的解決方案，並將其應用於第一篇文章中提到的問題。實質上，我希望能夠使用ng-show或ng-click來關閉Angular UI Bootstrap popover。Angular UI 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()}"嗎？我在哪裏編輯popover模板以添加關閉按鈕？

來源

2015-09-02 UltraSonja

你有這個問題的jsfiddle？ – hudsond7

這是由@ognus在GitHub thread上解決的。

他說：

我發現，使用一個簡單的自定義指令，我使用的情況下效果最好。我只想要能夠從popover模板中關閉popover。

指令公開scope.toggle方法，用戶自定義觸發器打開和關閉彈出窗口。然後我在popover模板中使用這個方法。

There is a plnkr我適應測試我自己的問題。解決方案涉及創建一個指令（當然）。

HTML

<!DOCTYPE html> 
<html ng-app="main"> 

    <head> 
    <script data-require="[email protected]" data-semver="1.4.1" src="https://code.angularjs.org/1.4.1/angular.js"></script> 
    <script data-require="[email protected]" data-semver="0.13.0" src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.13.0.min.js"></script> 
    <link data-require="[email protected]*" 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>

來源

2015-09-08 18:56:28 UltraSonja

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

 
    } 
 

 
    ]);

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

Link to the working example

這是使用溶液另一控制器爲酥料餅。該控制器打開和關閉彈出窗口。你也可以寫指令而不是控制器。如果數據重複，它的工作正常。

來源

2015-12-01 01:21:07

Angular UI Popover關閉按鈕

回答

相關問題