twitter-bootstrap - 从 Angular Controller 关闭 Twitter Bootstrap 模式

Question

我有一个模式窗口，用于向用户呈现表单。他们输入信息，然后按下一个按钮，发出一声咔哒声。服务器处理请求并发回响应。当响应成功时，我想从 Controller 关闭模式窗口。如何实现这一目标？

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

主页:

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

Controller 代码:

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

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

Answer 1

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

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

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

创建一个新的 Angular 指令:

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

现在从你的 Controller 调用dismiss()方法。

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

我仍处于 Angular JS 的早期阶段。我知道我们不应该在 Controller 内操作 DOM。所以我在指令中进行了 DOM 操作。我不确定这是否同样糟糕。如果我有更好的选择，我会在这里发布。

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