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 Dec 22 '14 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\$ – Florian Ribon Jan 7 '15 at 23:50

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.

| improve this answer | |

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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