AngularJS 1.5 组件和样式答案

【问题标题】：AngularJS 1.5 component and stylingAngularJS 1.5 组件和样式
【发布时间】：2016-11-19 15:24:56
【问题描述】：

我正在为 flexbox 创建一个布局生成器，并且正在使用 AngularJS 1.5.7 组件。基本上，我的问题是组件不存在“替换”，但我希望能够动态设置组件的根元素的样式。

假设我有一个主“div”，其显示设置为“flex”。当我点击一个按钮时，它会在这个“div”中添加一个组件，这将是 flexbox 布局的项目。生成的 HTML 是：

<div style="display:flex;">
  <item>
    <div style="flex-grow:1;..."></div>
  </item>
</div>

我的问题是样式应用于“div”inside“item”元素，但“flexbox”无法按预期工作，因为“item”元素没有任何弹性框- 相关的样式。请注意，我还有一些下拉菜单和文本框，用于修改“项目”组件的 CSS 属性。这个模板看起来像：

<div class="zone" data-ng-style="$ctrl.model.getStyle()">
...
</div>

我正在像这样插入这个组件：

<item model="$ctrl.item"></item>

那么，我的问题是：“指令的‘替换’属性的替代方法是什么？”或“如何动态设置组件根元素的样式？”。

谢谢

【问题讨论】：

component 应该是独立的小部件，类似于 Web 组件。一旦它被编译，它应该修改它的内容，而不是组件元素本身。对于你的 case 指令是一个更好的选择。
replace 指令也不推荐使用，所以我很好奇我们应该如何解决原始海报问题。

标签： angularjs

【解决方案1】：

我对使用一些仅限 Angular 的类如 .ng-isolate-scope 犹豫不决（因为 .component() 总是使用隔离范围），但您可以为自己的组件提供样式：

item { flex-grow: 1; }

如果您想动态应用特定于您的元素的类，您可以遵循相同的模式。

item.selected { font-weight: bold; }

不过，我不确定它与旧 IE 版本的兼容性如何。

【讨论】：