twitter-bootstrap - 使用 .enable-twitter-bootstrap 类在 div 中制作 angular-ui 附加模态

Question

我们有一个大型站点，其中包含许多遗留 .css，其规则名称与 twitter bootstrap 的规则名称冲突。作为解决方案，我们使用 .sass 版本的 bootstrap 并像这样包装了所有内容:

.bootstrap-enabled {

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

因此，如果您想要自举，则必须将您的 html 包装在例如一个<div class="bootstrap-enabled"> -标签。

除modals in angular-ui 外，这工作正常因为它们附加到 body .而且我们不能打.bootstrap-enabled从那时起，整个站点将“启用 Bootstrap ”。

有人知道是否可以将 angular-ui 模态附加到 DOM 中的特定元素吗？或者是否有其他智能解决方案可以解决此问题？

Answer 1

我通过将模式和弹出窗口放在命名空间之外来解决它，如下所示:

.bootstrap-enabled {
 ...
}

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

然后修改 ui-bootstrap-tpls-0.7.0.js 手动添加 bootstrap-enabled 属性到父元素，如下所示:

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