Bug Modal AngularJS@1.4.4


'use strict';

angular.module('plunker', ['dialog'])
    .controller('MainCtrl', ['$scope', 'dialog.Dialog',
        function ($scope, Dialog) {
           $scope.openModal = function () {
                Dialog.open({
                    templateUrl: 'template-dialog.html'
                });
            };
        }
    ]);

<!DOCTYPE html>
<html ng-app="plunker">

<head>
    <meta charset="utf-8" />
    <title>Bug Dialog in AngularJS@1.4.4</title>
    <script>
        document.write('<base href="' + document.location + '" />');
    </script>

    <link rel="stylesheet" href="style.css">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">

    <script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>

    <!-- script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.3/angular.min.js"></script -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.4/angular.min.js"></script>

    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/3.10.1/lodash.min.js"></script>
    <script src="angular-dialog.js"></script>
    <script src="app.js"></script>
</head>

<body ng-controller="MainCtrl">
    <div class="container container-page">
        <div class="page-header">
            <div class="row">
                <div class="col-md-12">
                    <h3 class="page-title">Bug Dialog in AngularJS@1.4.4</h3>
                    <p>Built a module to manage the loading templates for Modal Bootstrap. After upgrading my version of angularjs to 1.4.4, to close a Modal, I can not open it.</p>
                    <h4>Simulation:</h4>
                    <p>Open your console in the browser, click the "Open Modal" button, it opened perfectly and the island was writing an element I scored. After open, close the Modal and try to open it again, see that it was no longer displayed. Note that the console the writing element is different from the first time it was opened.</p>
                    <p><b>Note</b>: Change the version of angularjs to 1.4.3 and see that the problem does not happen.</p>
                </div>
            </div>
        </div>

        <div class="section-content">
            <div class="row">
                <div class="col-md-12">
                    <button ng-click="openModal()" class="btn btn-danger">Open Modal</button>
                </div>
            </div>
        </div>
    </div>
</body>

</html>

'use strict';

var TEMPLATE_DIALOG = 'template/dialog/dialog.html',
	TEMPLATE_DIALOG_LOADING = 'template/dialog/loading.html';

angular.module('dialog', [])
	.run(['$templateCache', function ($templateCache) {
		$templateCache.put(TEMPLATE_DIALOG, '<div ng-transclude></div>');
		$templateCache.put(TEMPLATE_DIALOG_LOADING, '<dialog></bf-dialog>');
	}])

	.directive('dialog', ['$injector', function ($injector) {
		var $parse = $injector.get('$parse');

		return {
			restrict: 'E',
			replace: true,
			transclude: true,
			templateUrl: TEMPLATE_DIALOG,
			link: function (scope, element, attrs) {
				element.modal($parse(attrs.options)(scope));
			}
		};
	}])

    .service('dialog.Dialog', ['$injector', function ($injector) {
    	var $rootScope = $injector.get('$rootScope'),
    		$q = $injector.get('$q'),
    		$http = $injector.get('$http'),
    		$templateCache = $injector.get('$templateCache'),
    		$compile = $injector.get('$compile');
    
    	this.open = function (_modalOptions) {
    		function getTemplatePromise () {
    			var promise;
    
    			if (modalOptions.template) {
    				promise = $q.when(modalOptions.template);
    			} else {
    				promise = $http.get(modalOptions.templateUrl, {
    					cache: $templateCache
    				}).then(function (result) {
    					return result.data;
    				});
    			}
    
    			return promise;
    		}
    
    		var modalOptions = _.extend({
    				resolve: {}
    			}, _modalOptions),
    
    			dialogElement,
    			templateResolvePromise = getTemplatePromise(),
    			modalScope = (modalOptions.scope || $rootScope).$new();
    
    		dialogElement = $compile($templateCache.get(TEMPLATE_DIALOG_LOADING))(modalScope);
    
    		$q.all([templateResolvePromise]).then(function resolveSuccess (data) {
    			var htmlTemplate = data[0],
    				resolvedLocals = data[1],
    				compiledContent;
    
    			compiledContent = $compile(htmlTemplate)(modalScope);
    
    			console.error('It is problem, diferent dialogElement in AngularJs@1.4.4', dialogElement);
    			dialogElement.append(compiledContent);
    		});
    	};
    
    	return this;
    }]);

<div class="modal-dialog">
	<div class="modal-content">
		<div class="modal-header">
			<button class="close" type="button" data-dismiss="modal" aria-hidden="true">×</button>
			<h3 class="modal-title">Modal Template Opened</h3>
		</div>
		<div class="modal-body">
			<div class="row">
			  <div class="col-md-12">
			    <p>After changing the version of angularjs to 1.4.4 or higher, close the modal and try to open again.</p>
			  </div>
			</div>
		</div>
		<div class="modal-footer">
			<button class="btn btn-default" data-dismiss="modal" aria-hidden="true">Close Modal</button>	
		</div>
	</div>
</div>

.modal-backdrop { z-index: 0 !important; }