让里面的div角UI追加模式带班.enable - Twitter的引导 [英] make angular-ui append modal inside div with class .enable-twitter-bootstrap

问题描述

我们有一个大的网站与传统的.css的很多与规则的名称，与Twitter的引导的那些冲突。作为一个解决方案，我们用引导的.sass版本，还包裹着一切，像这样：

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";
...

所以，如果你想给你引导你必须包装在例如你的HTML一个＆LT; D​​IV CLASS =＆GT启用自举-; -tag

本作品除了在角UI ，因为他们被追加情态动词罚款在体。我们不能对身体巴掌启用.bootstrap-类，因为那么整个网站将启用自举 -

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".

是否有人知道这是否可能使角UI模态追加到DOM中的特定元素？或者是有可能的另一个智能解决这个问题？

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?

推荐答案

我解决它通过将模式和酥料饼之外的命名空间，像这样：

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";

再修改 UI的引导，第三方物流企业，0.7.0.js 加入启用引导-属性的父元素手动像这样：

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

这篇关于让里面的div角UI追加模式带班.enable - Twitter的引导的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！