從一個按鈕關閉一個AngularJS Bootstrap彈出框

我已經創建了一個帶AngularJS的引導Popover。我創建了一個指令，以便按規定我用正確的指令程序的任何項目可以打開顯示裏面一個div一個酥料餅，如從一個按鈕關閉一個AngularJS Bootstrap彈出框

<i class="fa fa-user" data-content-id="popover-account" bs-popover></i>

這顯示了DIV #popover-account的內容作爲酥料餅的這個圖標。

我的問題是，在某些情況下，彈出窗口可能包含一個按鈕，即「取消」，它應該關閉彈出窗口。我不知道如何工作的，在這裏是當前的指令：

'use strict'; 

angular.module('designSystemApp') 
.directive('bsPopover', function() { 
    return { 
     //template: '<div></div>', 
     restrict: 'A', 
     link: function postLink(scope, element, attrs) { 

      var $content = $('#' + attrs.contentId); 

      element.popover({ 
       trigger: 'click', 
       placement: 'bottom', 
       html: true, 
       container: 'body', 
       content: function() { 
        return $content.removeClass('hidden'); 
       } 
      }); 

      element.on('show.bs.popover', function() { 
       $('[bs-popover]').popover('hide'); 
      }); 

      element.on('shown.bs.popover', function() { 
       $('#' + attrs.contentId).find('input:first').focus(); 
      }); 

     } 
    }; 
});

來源

2014-03-19 Steve

你確實有必要以處理按鈕？如果它只是駁回它，你可以有按鈕存在，但實際上只是點擊時消除彈出？ – nycynik

或者可以在點擊取消按鈕時將style.display設置爲'隱藏'？ –

彈出窗口上有一個表單：用戶標識和密碼，登錄，取消按鈕。因此，用戶填寫表單並單擊其中一個按鈕。取消只是關閉popover。我需要一個解決方案，我可以使用任何這樣的彈出窗口，作爲上述模塊的一部分。 – Steve

-1

我會建議使用Bootstrap components由AngularUI小組撰寫。你可以找到一套很棒的Twitter Bootstrap組件，包括Popover控件。

例子：

HTML：

<div ng-controller="PopoverDemoCtrl"> 
    <h4>Dynamic</h4> 
    <div class="form-group"> 
     <label>Popup Text:</label> 
     <input type="text" ng-model="dynamicPopover" class="form-control"> 
    </div> 
    <div class="form-group"> 
     <label>Popup Title:</label> 
     <input type="text" ng-model="dynamicPopoverTitle" class="form-control"> 
    </div> 
    <button popover="{{dynamicPopover}}" popover-title="{{dynamicPopoverTitle}}" class="btn btn-default">Dynamic Popover</button> 

    <hr /> 
    <h4>Positional</h4> 
    <button popover-placement="top" popover="On the Top!" class="btn btn-default">Top</button> 
    <button popover-placement="left" popover="On the Left!" class="btn btn-default">Left</button> 
    <button popover-placement="right" popover="On the Right!" class="btn btn-default">Right</button> 
    <button popover-placement="bottom" popover="On the Bottom!" class="btn btn-default">Bottom</button> 

    <hr /> 
    <h4>Triggers</h4> 
    <p> 
     <button popover="I appeared on mouse enter!" popover-trigger="mouseenter" class="btn btn-default">Mouseenter</button> 
    </p> 
    <input type="text" value="Click me!" popover="I appeared on focus! Click away and I'll vanish..." popover-trigger="focus" class="form-control"> 

    <hr /> 
    <h4>Other</h4> 
    <button Popover-animation="true" popover="I fade in and out!" class="btn btn-default">fading</button> 
    <button popover="I have a title!" popover-title="The title." class="btn btn-default">title</button> 
</div>

JS：

var PopoverDemoCtrl = function ($scope) { 
    $scope.dynamicPopover = "Hello, World!"; 
    $scope.dynamicPopoverTitle = "Title"; 
};

來源

2014-03-19 14:56:22

我正在使用這些。但是沒有一個例子顯示如何關閉內置的「點擊它」方法。 – Steve

您想使用另一個按鈕關閉彈出窗口？ –

是的。在某些情況下，彈出窗口可能會有一個帶取消按鈕的迷你表格。如果點擊該按鈕，則關閉包含按鈕的彈出窗口。 – Steve

從一個按鈕關閉一個AngularJS Bootstrap彈出框

回答

相關問題