关闭推特从角控制器引导模式

I have a modal window that I use to present a form to users. They enter the information and then press a button the has an ng-click. The server processes the request and sends back a response. When the response is success I want to close the modal window from the controller. How can this be achieved?

我有一个用于向用户呈现表单的模式窗口。他们输入信息，然后按下按钮，就会有一个ng-click。服务器处理请求并返回响应。当响应成功时，我想从控制器关闭模态窗口。如何实现这一点?

The modal is a partial included in another page

模态是包含在另一个页面中的部分

Main page:

主页:

<!-- main content -->
<p>Foo</p>
<!-- angular directive -->
<foo-directive></foo-directive>

Content of that directive:

内容的指令:

<div ng-controller="FooCtrl">
    <ul class="thumbnails">
        <li class="span3 tile tile-white" ng-repeat="foo in model.foo">
            <div>
                {{foo.bar}}
            </div>
            <div>
                ({{foo.bam}})
            </div>
            <div>
                <a data-toggle="modal" href="#myModal"><img src="{{foo.imgPath}}"></a>
            </div>
        </li>
    </ul>
    <!-- foo modal partial included by ejs -->
    <% include foo_modal.ejs %>
</div>

Modal markup:

模态标记:

<div id="fooModal" class="modal hide fade in" style="display: none; ">
    <div class="modal-header">
        <a class="close" data-dismiss="modal">×</a>
        <h3>New Device</h3>
    </div>
    <div class="modal-body">
        <h4>Foo Modal</h4>
        <div ng-controller="FooCtrl">
            <form name="fooFrm">
                <input id="email" type="email" class="input-medium" ng-model="fooEmail"
                       placeholder="Email">
                <button class="btn btn-primary btn-small"
                        ng-click="doFoo({email:fooEmail})">Email Link</button>
            </form>
        </div>
    </div>
    <div class="modal-footer">
        <a href="#" class="btn" data-dismiss="modal">Close</a>
    </div>
</div>

Controller code:

控制器代码:

functionFooCtrl($scope, FooService) {


    $scope.doFoo= function (email) {
       FooService.save({email:email.fooEmail}) {
            alert('Request successful');
            //TODO close Twitter bootstrap modal named fooModal here
        },
            function (err) {
                alert('Your request bonked, sorry');
                //TODO close twitter bootstrap modal named fooModal here
            });
        }
    };

What is the right way to close the modal from the controller in the success and error functions?

在成功和错误函数中关闭控制器的模态的正确方法是什么?

Thanks in advance,

提前谢谢,

8 个解决方案

#1

Have you looked at angular-ui bootstrap? There's a Dialog (ui.bootstrap.dialog) directive that works quite well. You can close the dialog during the call back the angular way (per the example):

你看过angular-ui引导程序了吗?有一个对话(ui.bootstrap.dialog)指令非常有效。您可以在回调角度方式时关闭对话框(根据示例):

$scope.close = function(result){
  dialog.close(result);
};

Update:

更新:

The directive has since been renamed Modal.

该指令从此被重新命名为Modal。

#2

We can achieve the same without using angular-ui. This can be done using angular directives.

不使用angular-ui也可以实现同样的功能。这可以通过使用角指令来实现。

First add the directive to the modal.

首先将指令添加到模式中。

<div class="modal fade" my-modal ....>...</div>

Create a new angular directive:

创建一个新的角指令:

app.directive('myModal', function() {
   return {
     restrict: 'A',
     link: function(scope, element, attr) {
       scope.dismiss = function() {
           element.modal('hide');
       };
     }
   } 
});

Now call the dismiss() method from your controller.

现在从您的控制器中调用dismissdismissview()方法。

app.controller('MyCtrl', function($scope, $http) {
    // You can call dismiss() here
    $scope.dismiss();
});

I am still in my early days with angular js. I know that we should not manipulate the DOM inside the controllers. So I have the DOM manipulation in the directive. I am not sure if this is equally bad. If I have a better alternative, I shall post it here.

我还在我的早期与有棱角的js。我知道我们不应该操作控制器中的DOM。指令中有DOM操作。我不确定这是否同样糟糕。如果我有更好的选择，我将把它贴在这里。

The important thing to note is that we cannot simply use ng-hide or ng-show in the view to hide or show the modal. That simply hides the modal and not the modal backdrop. We have to call the modal() instance method to completely remove the modal.

需要注意的是，我们不能简单地在视图中使用ng-hide或ng-show来隐藏或显示模式。这只是隐藏了模态背景而不是模态背景。我们必须调用modal()实例方法来完全移除模态。

#3

You can do it like this:

你可以这样做:

angular.element('#modal').modal('hide');

#4

Here's a reusable Angular directive that will hide and show a Bootstrap modal.

这是一个可重用的角指令，它将隐藏并显示引导模式。

app.directive("modalShow", function () {
    return {
        restrict: "A",
        scope: {
            modalVisible: "="
        },
        link: function (scope, element, attrs) {

            //Hide or show the modal
            scope.showModal = function (visible) {
                if (visible)
                {
                    element.modal("show");
                }
                else
                {
                    element.modal("hide");
                }
            }

            //Check to see if the modal-visible attribute exists
            if (!attrs.modalVisible)
            {

                //The attribute isn't defined, show the modal by default
                scope.showModal(true);

            }
            else
            {

                //Watch for changes to the modal-visible attribute
                scope.$watch("modalVisible", function (newValue, oldValue) {
                    scope.showModal(newValue);
                });

                //Update the visible value when the dialog is closed through UI actions (Ok, cancel, etc.)
                element.bind("hide.bs.modal", function () {
                    scope.modalVisible = false;
                    if (!scope.$$phase && !scope.$root.$$phase)
                        scope.$apply();
                });

            }

        }
    };

});

Usage Example #1 - this assumes you want to show the modal - you could add ng-if as a condition

使用示例#1 -假设您想要显示模态——您可以添加ng-if作为条件

<div modal-show class="modal fade"> ...bootstrap modal... </div>

Usage Example #2 - this uses an Angular expression in the modal-visible attribute

用法示例#2 -这在modal-visible属性中使用了一个角度表达式

<div modal-show modal-visible="showDialog" class="modal fade"> ...bootstrap modal... </div>

Another Example - to demo the controller interaction, you could add something like this to your controller and it will show the modal after 2 seconds and then hide it after 5 seconds.

另一个例子，演示控制器交互，你可以向控制器添加类似的东西，它会在2秒后显示模态，然后在5秒后隐藏它。

$scope.showDialog = false;
$timeout(function () { $scope.showDialog = true; }, 2000)
$timeout(function () { $scope.showDialog = false; }, 5000)

I'm late to contribute to this question - created this directive for another question here. Simple Angular Directive for Bootstrap Modal

我对这个问题做出了贡献——我在这里提出了另一个问题。用于引导模态的简单角指令

Hope this helps.

希望这个有帮助。

#5

You can add data-dismiss="modal" to your button attributes which call angularjs funtion.

您可以向您的按钮属性中添加data- dismis= "modal"，该属性调用angularjs函数。

Such as;

等;

<button type="button" class="btn btn-default" data-dismiss="modal">Send Form</button>

#6

I have remixed the answer by @isubuz and this answer by @Umur Kontacı on attribute directives into a version where your controller doesn't call a DOM-like operation like "dismiss", but instead tries to be more MVVM style, setting a boolean property isInEditMode. The view in turn links this bit of info to the attribute directive that opens/closes the bootstrap modal.

我混音@isubuz答案,这个答案由@Umur Kontacı属性指示到一个版本,控制器调用类似dom操作不像“解散”,而是试图更MVVM风格,设置一个布尔属性isInEditMode。视图将此信息链接到打开/关闭引导模式的属性指令。

var app = angular.module('myApp', []);

app.directive('myModal', function() {
   return {
     restrict: 'A',
     scope: { myModalIsOpen: '=' },
     link: function(scope, element, attr) {
       scope.$watch(
         function() { return scope.myModalIsOpen; },
         function() { element.modal(scope.myModalIsOpen ? 'show' : 'hide'); }
       );
     }
   } 
});

app.controller('MyCtrl', function($scope) {
  $scope.isInEditMode = false;
  $scope.toggleEditMode = function() { 
    $scope.isInEditMode = !$scope.isInEditMode;
  };
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/js/bootstrap.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.css" rel="stylesheet"/>

<div ng-app="myApp" ng-controller="MyCtrl as vm">

<div class="modal fade" my-modal my-modal-is-open="isInEditMode">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-body">
        Modal body! IsInEditMode == {{isInEditMode}}
      </div>
      <div class="modal-footer">
        <button class="btn" ng-click="toggleEditMode()">Close</button>
      </div>
    </div>
  </div>
</div>

<p><button class="btn" ng-click="toggleEditMode()">Toggle Edit Mode</button></p> 
<pre>isInEditMode == {{isInEditMode}}</pre>
  
</div>

#7

**just fire bootstrap modal close button click event**
var app = angular.module('myApp', []);
app.controller('myCtrl',function($scope,$http){
  $('#btnClose').click();// this is bootstrap modal close button id that fire click event
})

--------------------------------------------------------------------------------

<div class="modal fade" id="myModal" role="dialog">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
        </div>
        <div class="modal-body">
          <p>Some text in the modal.</p>
        </div>
        <div class="modal-footer">
          <button type="button" id="btnClose" class="btn btn-default" data-dismiss="modal">Close</button>
        </div>
      </div>
    </div>
  </div>

just set modal 'close button' id as i set btnClose, for closing modal in angular you have to just fire that close button click event as i did $('#btnClose').click()

当我设置btnClose时，只需设置模态关闭按钮id，对于角度关闭模式，你只需像我设置$('#btnClose')一样触发关闭按钮单击事件。

#8

You can do it with a simple jquery code.

您可以使用一个简单的jquery代码。

$('#Mymodal').modal('hide');