3

我们有一个大型网站，其中包含许多旧版 .css，其规则名称与 twitter bootstrap 的规则名称相冲突。作为一种解决方案，我们使用 .sass 版本的引导程序，并像这样包装了所有内容：

.bootstrap-enabled {

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

因此，如果您想引导，您必须将您的 html 包装在例如<div class="bootstrap-enabled">-tag 中。

这很好用，除了angular-ui 中的模态，因为它们被附加到body. 而且我们不能.bootstrap-enabled在身体上打一门课，因为那时整个网站都将是“启用引导的”。

有谁知道是否可以将 angular-ui 模态附加到 DOM 中的特定元素？或者这个问题是否有另一种智能解决方案？

4

1 回答 1

1

我通过将 modal 和 popover 放在命名空间之外来解决它，如下所示：

.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>");
}]);
于 2014-01-27T13:30:56.247 回答