javascript - Angular 一个独立的 CSS block

Question

我有一个我称之为返回一些 HTML 的工厂。我想在我的应用程序的一部分中显示此 HTML，但我不希望它的 CSS 影响网站的 CSS，也不希望网站的影响它。它或多或少需要是一个 iframe，但我觉得在 Angular 中有更好的方法来做到这一点。

我基本上有这样的东西(Angular 1.2)

var promise = myFactory.getHtml();
getTemplate.then(function(data) {
    $scope.mine.html = $sce.trustAsHtml(data.data);
});

我可以毫无问题地显示此 HTML，但它在我的应用程序内部看起来很糟糕。我怎样才能让它独立？

Answer 1

选择您的元素(比如使用 id 选择器)并使用以下规则重置其所有属性

all: initial;

参见 https://developer.mozilla.org/en/docs/Web/CSS/all

然后为您的 div 应用特定属性。例如

CSS

div {
    color: red;
    background-color: blue;
}
#a {
    all: initial;
    color: blue;
}   

HTML

<div id="a">asdf</div>

它是一个 Angular 模板这一事实无需考虑。