从角度控制器关闭Twitter Bootstrap模式

Question

我有一个模态窗口,用于向用户呈现表单.他们输入信息然后按下按钮点击按钮.服务器处理请求并发回响应.当响应成功时,我想从控制器关闭模态窗口.怎么能实现这一目标？

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

主页:

<!-- main content -->
<p>Foo</p>
<!-- angular directive -->
<foo-directive></foo-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>

模态标记:

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

控制器代码:

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

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

提前致谢,

Answer 1

我们可以在不使用angular-ui的情况下实现相同的目标.这可以使用角度指令来完成.

首先将指令添加到模态.

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

创建一个新的角度指令:

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

现在从控制器中调用dismiss()方法.

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

我仍然处于早期的角度js.我知道我们不应该操纵控制器内的DOM.所以我在指令中有DOM操作.我不确定这是否同样糟糕.如果我有更好的选择,我会在这里发布.

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

Answer 2

你可以这样做:

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

Answer 3

你看过angular-ui bootstrap吗？有一个Dialog(ui.bootstrap.dialog)指令,效果很好.您可以在回调角度方式期间关闭对话框(根据示例):

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

更新:

该指令后来被重命名为Modal.

Answer 4

这是一个可重用的Angular指令,它将隐藏并显示一个Bootstrap模式.

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

            }

        }
    };

});

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

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

用法示例#2 - 它在模态可见属性中使用Angular表达式

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

另一个示例 - 为了演示控制器交互,您可以向控制器添加这样的内容,它将在2秒后显示模态,然后在5秒后隐藏它.

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

我迟迟没有为这个问题做出贡献 - 在这里为另一个问题创建了这个指令.Bootstrap模态的简单角度指令

希望这可以帮助.