AngularJS Directive

Question

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) {
        return{
            restrict: 'A',
            link: function ($scope, $element, $attrs) {
                $scope.closeModal = function () {
                    templateModal.remove();
                };
                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>' +
                        '</div>';
                    templateModal = $compile(modal_html)($scope);
                    $body.append(templateModal);
                };
                $element.bind('click', callbackClick)
            }
        }
    }]);

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.