I want to do dynamic modal. Is there a shorter way? Am I doing it right?

angular.module('vidyotorModal', [])
    .directive('vidyotorModal', ['$document', '$compile', function ($document, $compile) {
            restrict: 'A',
            link: function ($scope, $element, $attrs) {
                $scope.closeModal = function () {
                callbackClick = function () {
                    var $body = $document.find('body');
                    var modal_html = '<div id="modal-box-bg" ng-click="closeModal()"></div>' +
                        '<div id="modal-box">' +
                        '<div class="inner">' +
                        '<i class="fa fa-times-circle close-btn" ng-click="closeModal()"></i>' +
                        '<div class="content">' +
                        document.getElementById('register').innerHTML +
                        '</div>' +
                        '</div>' +
                    templateModal = $compile(modal_html)($scope);
                $element.bind('click', callbackClick)
  • \$\begingroup\$ I'd prefer to use service for modal dialogs, like I did here github.com/SET001/angularjs_test_3_modal_window/blob/master/… \$\endgroup\$
    – SET
    Commented Dec 22, 2014 at 2:58
  • \$\begingroup\$ You could simply add a div after your body with a ng-include directive. Now you only need to set/unset the src based on some service/ broadcasted event. \$\endgroup\$ Commented Jan 7, 2015 at 23:50

1 Answer 1


Your code is manually recreating HTML, which is an anti-pattern. The Angular way is to supply separately HTML template and its data scope object.


Your Answer

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

Not the answer you're looking for? Browse other questions tagged or ask your own question.