CODEWITHSUNDEEP
javascriptangularjs
LOTUSMS
LOTUSMS

Reputation: 10280

Calling a bootstrap modal from an Angular Controller

I want to replace an alert for a bootstrap modal in the Angular controller that produces the successful sent mail. (The actual mail sending meat and potatoes is done with PHPMailer)

So, this is my controller:

// create angular controller
app.controller('form', function($scope) {

    // function to submit the form after all validation has occurred            
    $scope.submitForm = function(isValid) {

        // check to make sure the form is completely valid
        if (isValid) {      
           alert('our form is amazing');
        }

    };
});

I want to change that call from alert('our form...') to <div class="modal fade in" class="".....</div>

Now here is the other part I am confused on. I imagine the should be a way to "store" the modal in something that can be called from the controller without having to put the entire modal html in there, am I right? If so, how do I do that?

Upvotes: 0

Views: 963

Answers (2)

Slava N.
Slava N.

Reputation: 596

You could add modal to your view and then call it by id:

<div id="myModal1" class="modal fade in" class="".....</div>

..

// create angular controller
app.controller('form', function($scope) {

    // function to submit the form after all validation has occurred            
    $scope.submitForm = function(isValid) {

        // check to make sure the form is completely valid
        if (isValid) {      
           angular.element(myModal1).modal("show");
        }

    };
});

Upvotes: 1

Vinay
Vinay

Reputation: 558

For angular environment, you should use Ui-Bootstrap modal service.

Try to bind the codes in Factory to reuse it through out your app. Just inject $uibModal in your controller/factory.

Sample code below to confirm delete with Bootstrap modal service:

var modalInstance = $uibModal.open({
    animation: true,
    templateUrl: 'myModalContent.html',
    controller: function($scope, $uibModalInstance) {
        $scope.customBody = 'Are you sure to delete?';
        $scope.ok = function() {
            $uibModalInstance.close();
            var _res = DataFactory.deleteData(DataId);
            _res.then(function(data) {
                if (data == 1) {
                    UiFactory.alerts.success('Data deleted successfully!');
                    $rootScope.DataList.splice(index, 1);
                } else {
                    UiFactory.alerts.error('Operation failed! Please try again');
                }
            }, function(error) {
                console.log('Error = ' + error);
            });
        };
        $scope.cancel = function() {
            $uibModalInstance.dismiss('cancel');
        };
    },
    size: 'sm'
});

Upvotes: 2

Related Questions