make angular-ui append modal inside div with class .enable-twitter-bootstrap

Question

We have a big site with lot's of legacy .css with rule names that collides with the ones of twitter bootstrap. As a solution we use a .sass version of bootstrap and have wrapped everything like so:

.bootstrap-enabled {

// Grid system and page structure
@import "vendor/bootstrap-sass/lib/scaffolding";
@import "vendor/bootstrap-sass/lib/grid";
...

So if you want to you bootstrap you have to wrap your html in e.g. a <div class="bootstrap-enabled">-tag.

This works fine except for modals in angular-ui since they are appended to the body. And we can't slap a .bootstrap-enabled class on the body since then the whole site would be "bootstrap-enabled".

Does anybody know if it's possible to make angular-ui modals append to a specific element in the DOM? Or is there maybe another intelligent solution to this problem?

Answer 1

I solved it by putting the modal and popover outside of the namespace like so:

.bootstrap-enabled {
 ...
}

@import "vendor/bootstrap-sass/lib/modals";
@import "vendor/bootstrap-sass/lib/tooltip";

And then modified the ui-bootstrap-tpls-0.7.0.js by adding the bootstrap-enabled attributes to the parent elements manually like so:

angular.module("template/modal/backdrop.html", []).run(["$templateCache", function($templateCache) {
  $templateCache.put("template/modal/backdrop.html",
    "<div class=\"tbs-modal-backdrop bootstrap-enabled fade\" ng-class=\"{in: animate}\" ng-style=\"{'z-index': 1040 + index*10}\" ng-click=\"close($event)\"></div>");
}]);

angular.module("template/modal/window.html", []).run(["$templateCache", function($templateCache) {
  $templateCache.put("template/modal/window.html",
    "<div class=\"tbs-modal bootstrap-enabled fade {{ windowClass }}\" ng-class=\"{in: animate}\" ng-style=\"{'z-index': 1050 + index*10}\" ng-transclude></div>");
}]);