繁体   English   中英

引导模式不关闭角度js

[英]bootstrap modal not close angular js

我正在使用带有 angular js 的 UI 引导模式对话框。 模态加载成功。 但是,当我单击 YES/NO 按钮时,发出发生并且模态没有关闭。

错误说,'$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');
    };    

}]);

您正在尝试同时使用两种使用方法。 有两个(可能更多)您可以使用 $uibModal,但我相信您正在混合使用以下两个:

1)服务控制模式并返回一个承诺,我相信这就是我认为你在做什么。 在这种情况下,您不需要手动调用 close/dismiss。 您可以进行以下更改:

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方法,那么只需要把service改成:

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

然后在您的控制器中:

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

编辑- 更新为 op 以根据 georgeawg 建议删除反模式。

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM