fix(modal): add a work-around for transclusion scope

Fixes #2110
Closes #2134
Closes #2143

Author: pkozlowski-opensource

src/modal/modal.js

@@ -110,6 +110,17 @@ angular.module('ui.bootstrap.modal', ['ui.bootstrap.transition'])
     };
   }])
 
+  .directive('modalTransclude', function () {
+    return {
+      link: function($scope, $element, $attrs, controller, $transclude) {
+        $transclude($scope.$parent, function(clone) {
+          $element.empty();
+          $element.append(clone);
+        });
+      }
+    };
+  })
+
   .factory('$modalStack', ['$transition', '$timeout', '$document', '$compile', '$rootScope', '$$stackedMap',
     function ($transition, $timeout, $document, $compile, $rootScope, $$stackedMap) {
 

src/modal/test/modalWindow.spec.js

@@ -9,6 +9,13 @@ describe('modal window', function () {
     $compile = _$compile_;
   }));
 
+  it('should not use transclusion scope for modals content - issue 2110', function () {
+    $compile('<div modal-window><span ng-init="foo=true"></span></div>')($rootScope);
+    $rootScope.$digest();
+
+    expect($rootScope.foo).toBeTruthy();
+  });
+
   it('should support custom CSS classes as string', function () {
     var windowEl = $compile('<div modal-window window-class="test foo">content</div>')($rootScope);
     $rootScope.$digest();

template/modal/window.html

@@ -1,3 +1,3 @@
 <div tabindex="-1" role="dialog" class="modal fade" ng-class="{in: animate}" ng-style="{'z-index': 1050 + index*10, display: 'block'}" ng-click="close($event)">
-    <div class="modal-dialog" ng-class="{'modal-sm': size == 'sm', 'modal-lg': size == 'lg'}"><div class="modal-content" ng-transclude></div></div>
+    <div class="modal-dialog" ng-class="{'modal-sm': size == 'sm', 'modal-lg': size == 'lg'}"><div class="modal-content" modal-transclude></div></div>
 </div>