在 AngularJS UI 中关闭模态 [英] Closing A Modal in AngularJS UI

问题描述

AngularJS(和 AngularJS UI)非常新，我无法关闭模态窗口.

HTML 代码如下:

<div data-ng-show="agencies || agency.length > 0"><div><h3>机构
<div><a href="" data-ng-click="showModalAddAgency()"><span class="glyphicon glyphicon-cloud-upload"></span>&nbsp;Add</a>

控制器:

 '使用严格';app.controller('agencyController', function ($scope, $modal,enciesDataService) {$scope.agency = [];$scope.agency = null;在里面();函数初始化(){获取代理()；};函数 getAgencies() {var onResponse = 函数(结果){$scope.agency = results.data;};var onError = 函数(错误){警报(错误消息)；};代理数据服务.getAgencies().then(onResponse, onError);};$scope.showModalAddAgency = 函数 () {var modalInstance = $modal.open({templateUrl: 'app/views/agencydetail.html',控制器:'agencyController',背景:'静态'});};$scope.addAgency = 函数 addAgency() {var currentAgency = this.agency;var onResponse = 函数(结果){currentAgency.Id = results.data.Id;currentAgency.Name = results.data.Name;currentAgency.AgencyPortalAccountId = results.data.AgencyPortalAccountId;$scope.agency.push(currentAgency);currentAgency = {};//如何从这里关闭模态?我调用什么功能?};var onError = 函数(错误){//警报(错误.消息)；}AgencyDataService.addAgency(currentAgency).then(onResponse, onError);};});

几乎，在发出 POST 请求后，我想关闭模式窗口，但我不知道如何关闭.不知道如何引用我打开的模态窗口.

感谢任何见解.

更新:我的模态的 html 包括一个保存和取消按钮.

<button class="btn btn-primary normal-button"ng-click="addAgency()">保存</button><button class="btn btn-warning" ng-click="$dismiss()" style="width:100px;">取消</button>

当我点击取消"按钮时，模态会关闭.我想要实现的是能够在 addAgency 功能完成时关闭模态.

解决方案

您需要将模态实例保存在 $scope 中，以便您以后可以引用它.

所以你会在顶部初始化你的 $scope.modalInstance = null;.

然后你会像这样打开你的模式:

$scope.modalInstance = $modal.open({templateUrl: 'app/views/agencydetail.html',控制器:'agencyController',背景:'静态'});

要关闭，您将调用 $scope.modalInstance.close();(这将转到您拥有 的位置//如何从这里关闭模态?有什么功能我打电话? 评论.

这是一个展示如何操作的 plunkr:示例

Quite new with AngularJS (and AngularJS UI) and I am unable to close a modal window.

The HTML code as follows:

<div>
    <div data-ng-show="agencies || agencies.length > 0">
        <div>
            <h3>
                Agencies
            </h3>
        </div>
        <div>
            <a href="" data-ng-click="showModalAddAgency()"><span class="glyphicon glyphicon-cloud-upload"></span>&nbsp;Add</a>
        </div>
    </div>
</div>

Controller:

    'use strict';

        app.controller('agencyController', function ($scope, $modal, agenciesDataService) {
            $scope.agencies = [];
            $scope.agency = null;
            init();

            function init() {
                getAgencies();
            };

        function getAgencies() {
                var onResponse = function (results) {
                    $scope.agencies = results.data;
                };

                var onError = function (error) {
                    alert(error.message);
                };

                agenciesDataService.getAgencies()
                    .then(onResponse, onError);
            };

        $scope.showModalAddAgency = function () {
                var modalInstance = $modal.open({
                    templateUrl: 'app/views/agencydetail.html',
                    controller: 'agencyController',
                    backdrop: 'static'
                });
            };

        $scope.addAgency = function addAgency() {
                var currentAgency = this.agency;

                var onResponse = function (results) {
                    currentAgency.Id = results.data.Id;
                    currentAgency.Name = results.data.Name;
                    currentAgency.AgencyPortalAccountId = results.data.AgencyPortalAccountId;
                    $scope.agencies.push(currentAgency);
                    currentAgency = {};

                    // HOW TO CLOSE THE MODAL FROM HERE? WHAT FUNCTION DO I CALL?
                };

                var onError = function (error) {
                    //alert(error.message);
                }

                agenciesDataService.addAgency(currentAgency)
                    .then(onResponse, onError);
            };

        });

Pretty much, after making the POST request, I want to close the modal window, but I don't have any idea how. Not sure how I can reference the modal window which I opened.

Any insight appreciated.

Update: My modal's html includes an Save and Cancel button.

<div class="modal-footer">
<button class="btn btn-primary normal-button"
            ng-click="addAgency()">Save</button>
    <button class="btn btn-warning" ng-click="$dismiss()" style="width:100px;">Cancel</button>
</div>

The modal does close when I hit the Cancel button. What I want to achieve is being able to close the modal when the addAgency function is completed.

解决方案

You need to save your modal instance in the $scope so that you have a reference to it later.

So you'd init your $scope.modalInstance = null; at the top.

Then you'd open your modal like this:

$scope.modalInstance = $modal.open({
    templateUrl: 'app/views/agencydetail.html',
    controller: 'agencyController',
    backdrop: 'static'
});

To close, you would then call $scope.modalInstance.close(); (which would go where you have your // HOW TO CLOSE THE MODAL FROM HERE? WHAT FUNCTION DO I CALL? comment.

Here's a plunkr that shows how to do it: EXAMPLE

这篇关于在 AngularJS UI 中关闭模态的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！