当前位置: 首页 > 面试题库 >

从Angular控制器关闭Twitter Bootstrap模式

郭志泽
2023-03-14
问题内容

我有一个模式窗口,用于向用户展示表单。他们输入信息,然后按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引导程序?有一个Dialog(ui.bootstrap.dialog)指令效果很好。您可以在回调角度方式期间关闭对话框(按照示例):

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

更新:

此指令自此已重命名为Modal。



 类似资料:
  • 我需要通过单击从内部关闭。 我有一个主类,从中我创建了一个场景的主舞台。我使用FXML来实现这一点。 现在在出现的主窗口中,我有所有的控制项和菜单以及通过FXML和适当的控制类制作的东西。这就是我决定在帮助菜单中包含关于信息的部分。所以当菜单帮助-关于被激活时,我有一个事件正在发生,像这样: 正如所见,关于框窗口是通过带有控制器的FXML创建的。我想添加一个从控制器内关闭新阶段。 我发现自己能够做

  • 问题内容: 我已按照此处的说明进行操作,但仍不确定这部分内容: 我曾尝试以编程方式实例化视图控制器,但仍然无济于事。 这是我退出模态视图控制器时的代码: 我正在使用情节提要通过模式视图进行筛选。 这是我希望传输回父视图控制器的数据: 这是两个字符串值。 编辑: 我试图从模态视图控制器传递数据,如下所示: 而在父视图控制器上,我这样做的是: 当我按下打印按钮时,我仍然无法获得任何价值。 模态视图控制

  • 问题内容: 我正在使用angular-ui模态指令http://angular-ui.github.io/bootstrap/。 我从上面的链接中遵循了示例。 这是我想从控制器发送的数据: 这是我的模态控制器: 问题是我无法在Modal控制器中访问“选定产品”。我知道原因是要进行宽度异步调用,并且只能从GUI进行访问。但是我该如何解决这个问题?如何将“ $ scope.selectedProduc

  • 问题内容: 我有以下情况: controller.js controllerSpec.js 错误: 我也尝试过类似的方法,但没有成功: 我该如何解决?有什么建议? 问题答案: 有两种方法(或肯定有更多方法)。 想象一下这种服务(无论它是工厂都没关系): 使用此控制器: 一种方法是使用要使用的方法创建对象并对其进行监视: 然后,将其作为dep传递给控制器​​。无需注入服务。那可行。 另一种方法是模拟

  • 问题内容: 我正在使用SpriteKit制作游戏。我有3个viewControllers:选择级别vc,游戏vc和win vc。游戏结束后,我想显示Win vc,然后如果我按Win vc上的“确定”按钮,我想关闭Win vc和游戏vc(将两个视图控制器弹出堆栈)。但我不知道该怎么办,因为如果我打电话 Win vc(堆栈顶部)被关闭了,所以我不知道在哪里再次调用它来关闭游戏vc。有什么方法可以在不使

  • 问题内容: 我正在使用此应用程序,我需要所有视图控制器,但一个需要纵向显示。我特别需要一个单一的视图控制器,使其能够旋转至手机所处的方向。 为此,我以模态形式呈现(未嵌入NavigationController中) 所以(例如)我的结构是这样的: 窗口-肖像 根视图控制器(UINavigationController-肖像) 家庭视图控制器(UIViewController-肖像) 详细信息视图控