引导模态不关闭角度js

时间:2019-06-17 11:59:49

标签: javascript angularjs bootstrap-modal angular-ui-bootstrap

我正在使用带有角度js的UI引导模态对话框。模态已成功加载。但是,当我单击“是/否”按钮时,发生了发布,并且模式没有关闭。

  

错误说,'$ uibModal.close不是函数'。

.directive('confirm', function(ConfirmService) {
    return {
        restrict: 'A',
        scope: {
            eventHandler: '&ngClick'
        },
        link: function(scope, element, attrs){
            element.unbind("click");
            element.bind("click", function(e) {
                ConfirmService.open(attrs.confirm, scope.eventHandler);
            });
        }
    }
})

这是我的服务

.service('ConfirmService', function($uibModal) {
    var service = {};
    service.open = function (text, onOk) {
        var modalInstance = $uibModal.open({
            templateUrl: 'modules/confirmation-box/confirmation-box.html',
            controller: 'userListCtrl',
            resolve: {
                text: function () {
                    return text;
                }
            }
        });

        modalInstance.result.then(function (selectedItem) {
            onOk();
        }, function () {
        });
    };

    return service;
})

这是我的控制器文件。我正在尝试在控制器内设置是/否按钮

.controller('userListCtrl',
  ['$scope','$http','appConfig','$uibModalInstance', '$uibModal','$log','alertService',
  function ($scope,$http, appConfig,$uibModalInstance, $uibModal,$log,alertService) {

    $scope.ok = function () {
        $uibModalInstance.close();
    };

    $scope.cancel = function () {
        $uibModalInstance.dismiss('cancel');
    };    

}]);

1 个答案:

答案 0 :(得分:0)

您正在尝试一次使用两种使用方法。您可以使用$ uibModal两种(可能更多),但是我认为这是您要混合使用的两种:

1)服务控制模式并返回承诺,我相信这是我认为您正在做的事情。在这种情况下,您不需要手动调用关闭/关闭。您可以进行以下更改:

service.open = function(text, onOK) {
    var modalInstance = $uibModal.open({
        templateUrl: 'modules/confirmation-box/confirmation-box.html',
        controller: 'userListCtrl',
        resolve: {
            text: function () {
                return text;
            }
        }
    });

    // Return so you can chain .then just in case.  Generally we don't even 
    // do this, we just return the instance itself and allow the controller to
    // decide how to handle results/rejections
    return modalInstance.result;
}

在您的模板文件中,您将拥有类似的东西:

<button type="button" ng-click="$close(selectedItem)"></button>
<button type="button" ng-click="$dismiss(readon)"></button>

2)如果要直接使用close方法,则只需将服务更改为:

...
return $uibModal.open({});

然后在您的控制器中:

var modal = service.open('confirm');
modal.result.then(...)
modal.close()

编辑-根据georgeawg建议对op进行了更改,以删除反图案。