使用AngularJS打开和关闭Bootstrap模态弹窗不起作用。

32 浏览
0 Comments

使用AngularJS打开和关闭Bootstrap模态弹窗不起作用。

嗨，我想使用AngularJS的controller.js代码来打开和关闭Bootstrap模态框。

我的controller代码如下：

app.controller('RoleViewCtrlq', ['$scope', '$modalInstance', '$modal',
function ($scope, $modalInstance, $modal) {
    $scope.open = function () {
        debugger;
        var modalInstance = $modal.open({
            templateUrl: 'myModalContent.html',
        });
        $scope.ok = function () {
            $modalInstance.close();
        };
        $scope.cancel = function () {
            $modalInstance.dismiss('cancel');
        };
    }
}
]);

我创建了一个示例，链接如下：

https://plnkr.co/edit/xRhCR7qidlr24M8nAOA6?p=preview

在controller.js代码中无法打开和关闭我的弹出框，请有人检查一下问题吗？

0

2 答案

0 Comments

问题的原因是HTML中有一个script标签，需要将其删除。解决方法是在form元素中添加"novalidate"属性，并使用AngularJS进行表单验证。可以在控制器中使用已经定义的OK和CANCEL函数来关闭模态框。如果在关闭模态框时出现默认的HTML5表单验证，可以通过在form元素中添加"novalidate"属性来解决。最后，提供了一个更新后的代码示例供参考。

0
0 Comments

问题出现的原因是在提供的Plunker代码中，没有设置任何myModalContent.html文件。当使用

var modalInstance = $modal.open({
    templateUrl: 'myModalContent.html'
});

时，Angular会检查是否存在myModalContent.html文件以包含在模态框中。这意味着从模板中创建模态框。

经过审核你的代码后，我认为这并不是你想要实现的功能：

Forked your Plunker

：：我想通过使用控制器关闭模态框，你能提供答案吗？

嗨Mistalis，这在页面刷新后关闭了。我想在不刷新页面的情况下关闭弹出窗口。

：嗨Vinoth，你在实现这种方式上有什么问题... jsfiddle.net/wjohtz0y 我在你的Plunker代码中看不到任何$modal.open或templateUrl，这是必需的。

解决方法是在代码中添加$modal.open和templateUrl。

0