2

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!

Improve this question
3
  • For the agular js with bootstrap component i suggest you to use angular-ui.github.io/bootstrap Commented Feb 20, 2016 at 19:14
  • @PareshGami Hi Paresh, thanks for the comment, but I could not figure out how I can load a modal template dynamically using a separate template file with UI Bootstrap. Commented Feb 20, 2016 at 19:30
  • In fact, I have tried to do the same using UI Bootstrap library, and the result was the same. I managed to load the template, but it does not show up. Commented Feb 20, 2016 at 19:39

1 Answer 1

Reset to default
4

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;
};
Improve this answer
Sign up to request clarification or add additional context in comments.

6 Comments

thanks, I know that giving it a timeout would work (and is working), but I was wondering if that would be possible to do it without a timeout.
It could be possible. Just add the ng-if="detectLoaded()" to the last element in the HTML (to ensure the first element is already available before calling modal). Or, better, create a stub element at the end to use as a detector.
I have edited the answer to add the second option without timeout. Not 100% sure it will work, but worth trying out.
Oh, and you could simply use the $modal service. It could save you from stuff like this.
I solved by using modal service. I think it is a lot better solution than what you have described, and it supports dynamic content. So, if you would like to edit your answer and put modal service on top of the two alternatives you provided, I am happy to accept it.
|

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.