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)
 }
 }
 }]);

• SET: I'd prefer to use service for modal dialogs, like I did here github.com/SET001/angularjs_test_3_modal_window/blob/master/…
• Florian Ribon: 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.

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.