Bootstrap modal popup open and close using angularjs not working

Question

Hi i want to open and close the bootstrap model popup by using angularjs controller.js code.

my controller code

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


    }
}
]);

Here i have create the sample https://plnkr.co/edit/xRhCR7qidlr24M8nAOA6?p=preview

it is not working to open and close my pop up in controller.js code. can any one check the issue.??

Aswathy Balan · Accepted Answer · 2017-04-24 09:12:26Z

1

 <script type="text/ng-template" id="myModalContent.html">

Remove this script tag from HTML and try again. It is working

answered Apr 24, 2017 at 9:12

Aswathy Balan

5041 gold badge4 silver badges15 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Vinoth Over a year ago

:@ Aswathy Balan : i want to close the model popup by using controller can you provide the answer

Aswathy Balan Over a year ago

Add "novalidate" to your form element. Then you can close your modal. And use angularJs form validations for validating the form. <form name="profileformAdd" novalidate>

Vinoth Over a year ago

already i set the form validation. I want to close the popup in controller.js. Did you understand

Aswathy Balan Over a year ago

You can close your modal using your OK and CANCEL function that you have already defined in your controller. But now on closing modal HTML5 default form validations are performing, that is why you are not able to close the modal. So add "novalidate" to your form element.

Aswathy Balan Over a year ago

I have updated your code. Please try this one and tell me is this ok or not. plnkr.co/edit/rznnIzrZlgXcY3l8RT9b?p=preview

|

Community · Accepted Answer · 2020-06-20 09:12:55Z

0

In the Plunker you have provided, you have not set any myModalContent.html.

When using:

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

Angular will check for a myModalContent.html file to include in the modal. It means creating the modal from a template.

After reviewing your code, I think this is not exactly what you are trying to achieve:

Forked your Plunker

edited Jun 20, 2020 at 9:12

CommunityBot

11 silver badge

answered Apr 24, 2017 at 9:14

Mistalis

18.3k14 gold badges78 silver badges97 bronze badges

3 Comments

Vinoth Over a year ago

:@mistails : i want to close the model popup by using controller can you provide the answer

Vinoth Over a year ago

Hi Mistalis, this is closed after the page refreshed. I want to close the pop up without refresh the page

Thalaivar Over a year ago

@Vinoth: Hi Vinoth, whats your problem implementing in this way... jsfiddle.net/wjohtz0y I see in your plunkr code you don't have any $modal.open or templateUrl, which is needed.

Collectives™ on Stack Overflow

Bootstrap modal popup open and close using angularjs not working

2 Answers 2

6 Comments

Forked your Plunker

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related