twitter-bootstrap – 从Angular控制器关闭Twitter Bootstrap模

发布时间：2020-12-18 00:02:02 所属栏目：安全来源：网络整理

导读：我有一个模态窗口，我用来向用户提交表单。他们输入信息，然后按一个有ng单击的按钮。服务器处理请求并发回一个响应。当响应成功时，我想关闭来自控制器的模态窗口。如何实现呢？模态是另一个页面中包含的一部分主页： !-- main content --pFoo/p!-- angul

我有一个模态窗口，我用来向用户提交表单。他们输入信息，然后按一个有ng单击的按钮。服务器处理请求并发回一个响应。当响应成功时，我想关闭来自控制器的模态窗口。如何实现呢？

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

主页：

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

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

提前致谢，

解决方法

你看过 angular-ui bootstrap吗？有一个对话框(ui.bootstrap.dialog)指令，工作相当不错。您可以在回调角度方式(按照示例)期间关闭对话框：

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

更新：

该指令后来更名为Modal。

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!