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

Solution 1:

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

Solution 2:

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 validif (isValid) {      
           angular.element(myModal1).modal("show");
        }

    };
});