从一个按钮关闭一个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弹出框

回答

相关问题