Dynamically Load Bootstrap Modal Content and Open It Using Angular.js

Question

I am trying to load modal content dynamically and open it when the user clicks a button. I have managed to dynamically load the content using ngInclude, but I cannot open it afterwards. My code:

<div class="modal-container" id="modal-container" ng-include="modal_template"></div>

and my controller.js

function set_modal_template(templateName, callback) {
    $scope.modal_template = templateName;
    callback();
}

$scope.load_modal_sms = function () {
    set_modal_template("/static/partials/modal_template.html", function() {
        $('#modal').modal('show');
    });
};

and my modal_template.html:

<div class="modal fade" id="modal" role="dialog">
    <div class="modal-dialog" modal-sm>
        <div class="modal-content">
            <div class="modal-header">
                <h4>Pop-up head. Email</h4>
            </div>
            <div class="modal-body">
                <h4>Pop-up body.</h4>
            </div>
            <div class="modal-footer">
                <button class="btn btn-primary">Save</button>
            </div>
        </div>
    </div>
</div>

What is happening is that the content of the modal_content.html loads perfectly, but the modal does not show up. If I click again, I only see the transparent black layer that is behind the modal, blacking out the screen, but not the modal itself.

Thanks!

Answer 1

You can solve this problem using a number of techniques. There are a few modules out there that provide modal service, including angular-ui, and I think these could solve your problems better (and more).

angular-modal-service

angular-modal-service is a module dedicated to creating modals. It allows providing either a template or a template service, and supports defining a scope for your modal (useful for abstraction).

Your sample code above would be

<div class="modal fade" id="modal" role="dialog">
    <div class="modal-dialog" modal-sm>
        <div class="modal-content">
            <div class="modal-header">
                <h4>Pop-up head. Email</h4>
            </div>
            <div class="modal-body">
                <h4>Pop-up body.</h4>
            </div>
            <div class="modal-footer">
                <button class="btn btn-primary">Save</button>
            </div>
        </div>
    </div>
</div>

// Do not forget to include the module dependency: var myApp = angular.module('myApp', ['angularModalService']);
myApp.controller('MyController', ['ModalService', function (ModalService) {
    $scope.load_modal_sms = function () {
        var modal = ModalService.showModal({
          templateUrl: "/static/partials/modal_template.html",
          controller: function () { /* controller code */ }
        }).then(function (modal) {
            // Modal has been loaded...
            modal.element.modal();
        });
    };
}]);

angular-ui-bootstrap

angular-ui-bootstrap (bower install angular-ui-bootstrap) has a $modal service that is extremely easy to use:

<div class="modal fade" id="modal" role="dialog">
    <div class="modal-dialog" modal-sm>
        <div class="modal-content">
            <div class="modal-header">
                <h4>Pop-up head. Email</h4>
            </div>
            <div class="modal-body">
                <h4>Pop-up body.</h4>
            </div>
            <div class="modal-footer">
                <button class="btn btn-primary">Save</button>
            </div>
        </div>
    </div>
</div>

// Do not forget to include the module dependency: var myApp = angular.module('myApp', ['ui.bootstrap.modal']);
myApp.controller('MyController', ['$modal', function ($modal) {
    $scope.load_modal_sms = function () {
        var modal = $modal.open({
          templateUrl: "/static/partials/modal_template.html",
          scope: { /* custom scope */ }
        });
    };
}]);

Using your method

You may want to give angular some time to load and render the loaded template first before trying to .modal() it. If you haven't noticed, your callback is not doing anything special. You can as well run the code without any callback.

<div class="modal fade" id="modal" role="dialog" ng-if="detectLoaded()">
    <div class="modal-dialog" modal-sm>
        <div class="modal-content">
            <div class="modal-header">
                <h4>Pop-up head. Email</h4>
            </div>
            <div class="modal-body">
                <h4>Pop-up body.</h4>
            </div>
            <div class="modal-footer">
                <button class="btn btn-primary">Save</button>
            </div>
        </div>
    </div>
</div>

function set_modal_template(templateName) {
    $scope.modal_template = templateName;
}

$scope.load_modal_sms = function () {
    set_modal_template("/static/partials/modal_template.html");
};

$scope.detectLoaded = function () {
    // If this function is called, the template has been loaded...
    setTimeout(function () { // Give some time for the template to be fully rendered
        $('#modal').modal('show');
    }, 10);
    return true;
};

You can also remove the timeout by changing the position of the ng-if, or creating a stub element after the div. You can return false from the detectLoaded function to make the stub element not show. I have not tested this last option and don't know if it will work, you have to check.

<div class="modal fade" id="modal" role="dialog">
    <div class="modal-dialog" modal-sm>
        <div class="modal-content">
            <div class="modal-header">
                <h4>Pop-up head. Email</h4>
            </div>
            <div class="modal-body">
                <h4>Pop-up body.</h4>
            </div>
            <div class="modal-footer">
                <button class="btn btn-primary">Save</button>
            </div>
        </div>
    </div>
</div>
<div ng-if="detectLoaded()"></div>

$scope.detectLoaded = function () {
    $('#modal').modal('show');
    return false;
};