Question

AngularJS（和AngularJS UI）相当新，我无法关闭模态窗口。

HTML代码如下：

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

控制器：

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

        });

差不多，在发出POST请求后，我想关闭模态窗口，但我不知道如何。不知道如何引用我打开的模态窗口。

有任何见解。

更新：我的模态的html包含一个“保存”和“取消”按钮。

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

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

Answer 1

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

因此，您需要在顶部初始化$scope.modalInstance = null;。

然后你打开你的模态：

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

要关闭，您可以拨打$scope.modalInstance.close();（这会发送到// HOW TO CLOSE THE MODAL FROM HERE? WHAT FUNCTION DO I CALL?评论的位置。

这是一个展示如何操作的傻瓜：EXAMPLE

Answer 2

要关闭你的模态，你有两个功能：＆＃34;关闭＆＃34;并且＆＃34;解雇＆＃34;。

假设模态html文件的结尾如下：

<div class="modal-footer">
    <input type="button" class="submit" value="Save" ng-click="ok()" />
    <input type="button" class="cancel" value="Cancel" ng-click="cancel()" />
</div>

你必须在你的模态控制器中写下：

$scope.cancel = function(){
    $modalInstance.dismiss('cancel');
};
$scope.ok = function(){
    // you can pass anything you want value object or reference object
    $modalInstance.close("clicked ok"); 
};

如果您想知道用户是否点击了＆＃34;取消＆＃34;或者＆＃34;确定＆＃34;你必须改变你的功能＆＃34; showModalAddAgency＆＃34;那样：

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

    modalInstance.result.then(function (resultOk) {
         // OK
    }, function (resultCancel) {
         // CANCEL
    });
};

我希望我的回答适合你。

度过美好的一天！

在AngularJS UI中关闭模态

2 个答案: