fix(modal): use safe $digest calls to ease controller usage

Author: mgcrea

src/modal/modal.js

@@ -94,16 +94,18 @@ angular.module('mgcrea.ngStrap.modal', ['mgcrea.ngStrap.helpers.dimensions'])
           if(options.html) template = template.replace(htmlReplaceRegExp, 'ng-bind-html="');
           template = trim.apply(template);
           modalLinker = $compile(template);
-          // modalElement = modalLinker(scope);
           $modal.init();
         });
 
         $modal.init = function() {
+
+          // Options: show
           if(options.show) {
             scope.$$postDigest(function() {
               $modal.show();
             });
           }
+
         };
 
         $modal.destroy = function() {
@@ -120,6 +122,7 @@ angular.module('mgcrea.ngStrap.modal', ['mgcrea.ngStrap.helpers.dimensions'])
 
           // Destroy scope
           scope.$destroy();
+
         };
 
         $modal.show = function() {
@@ -146,7 +149,7 @@ angular.module('mgcrea.ngStrap.modal', ['mgcrea.ngStrap.helpers.dimensions'])
           }
           $animate.enter(modalElement, parent, after, function() {});
           scope.$isShown = true;
-          scope.$digest();
+          scope.$$phase || scope.$digest();
           $modal.focus();
 
           bodyElement.addClass(options.prefixClass + '-open');
@@ -175,7 +178,7 @@ angular.module('mgcrea.ngStrap.modal', ['mgcrea.ngStrap.helpers.dimensions'])
           if(options.backdrop) {
             $animate.leave(backdropElement, function() {});
           }
-          scope.$digest();
+          scope.$$phase || scope.$digest();
           scope.$isShown = false;
 
           // Unbind events

src/modal/test/modal.spec.js

@@ -1,17 +1,20 @@
 'use strict';
 
-describe('modal', function () {
+describe('modal', function() {
 
-  var $compile, $templateCache, scope, sandboxEl;
+  var bodyEl = $('body'), sandboxEl;
+  var $compile, $templateCache, $modal, scope;
 
   beforeEach(module('ngSanitize'));
   beforeEach(module('mgcrea.ngStrap.modal'));
 
-  beforeEach(inject(function (_$rootScope_, _$compile_, _$templateCache_) {
+  beforeEach(inject(function (_$rootScope_, _$compile_, _$templateCache_, _$modal_) {
     scope = _$rootScope_.$new();
-    sandboxEl = $('<div>').attr('id', 'sandbox').appendTo($('body'));
+    bodyEl.html('');
+    sandboxEl = $('<div>').attr('id', 'sandbox').appendTo(bodyEl);
     $compile = _$compile_;
     $templateCache = _$templateCache_;
+    $modal = _$modal_;
   }));
 
   afterEach(function() {
@@ -33,6 +36,9 @@ describe('modal', function () {
       scope: {items: [{name: 'foo', modal: {title: 'Title', content: 'Hello Modal!'}}]},
       element: '<ul><li ng-repeat="item in items"><a title="{{item.modal.title}}" data-content="{{item.modal.content}}" bs-modal>{{item.name}}</a></li></ul>'
     },
+    'markup-ngClick-service': {
+      element: '<a ng-click="showModal()">click me</a>'
+    },
     'options-placement': {
       element: '<a data-placement="bottom" bs-modal="modal">click me</a>'
     },
@@ -60,7 +66,7 @@ describe('modal', function () {
 
   // Tests
 
-  describe('with default template', function () {
+  describe('with default template', function() {
 
     it('should open on click', function() {
       var elm = compileDirective('default');
@@ -100,10 +106,41 @@ describe('modal', function () {
 
   });
 
+  describe('using service', function() {
+
+    it('should correctly open on next digest', function() {
+      var myModal = $modal(templates['default'].scope.modal);
+      scope.$digest();
+      expect(bodyEl.children('.modal').length).toBe(1);
+      myModal.hide();
+      expect(bodyEl.children('.modal').length).toBe(0);
+    });
+
+    it('should correctly be destroyed', function() {
+      var myModal = $modal(angular.extend(templates['default'].scope.modal));
+      scope.$digest();
+      expect(bodyEl.children('.modal').length).toBe(1);
+      myModal.destroy();
+      expect(bodyEl.children('.modal').length).toBe(0);
+      expect(bodyEl.children().length).toBe(1);
+    });
+
+    it('should correctly work with ngClick', function() {
+      var elm = compileDirective('markup-ngClick-service');
+      var myModal = $modal(angular.extend({show: false}, templates['default'].scope.modal));
+      scope.showModal = function() {
+        myModal.$promise.then(myModal.show);
+      };
+      expect(bodyEl.children('.modal').length).toBe(0);
+      angular.element(elm[0]).triggerHandler('click');
+      expect(bodyEl.children('.modal').length).toBe(1);
+    });
+
+  });
 
-  describe('options', function () {
+  describe('options', function() {
 
-    describe('animation', function () {
+    describe('animation', function() {
 
       it('should default to `animation-fade` animation', function() {
         var elm = compileDirective('default');
@@ -113,7 +150,7 @@ describe('modal', function () {
 
     });
 
-    describe('placement', function () {
+    describe('placement', function() {
 
       it('should default to `top` placement', function() {
         var elm = compileDirective('default');
@@ -135,7 +172,7 @@ describe('modal', function () {
 
     });
 
-    describe('html', function () {
+    describe('html', function() {
 
       it('should correctly compile inner content', function() {
         var elm = compileDirective('options-html');
@@ -146,7 +183,7 @@ describe('modal', function () {
 
     });
 
-    describe('template', function () {
+    describe('template', function() {
 
       it('should support custom template', function() {
         $templateCache.put('custom', '<div class="modal"><div class="modal-inner">foo: {{title}}</div></div>');