Question

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

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

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

我的问题是样式应用于＆＃34; div＆＃34; 内部＆＃34;项目＆＃34;元素，但＆＃34; flexbox＆＃34;没有像预期的那样工作＆＃34;项目＆＃34; element没有任何与flexbox相关的样式。请注意，我的想法是我还有一些下拉列表和文本框用于修改＆＃34;项目的＃CSS;零件。这个模板看起来像：

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

我正在插入这个组件：

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

然后，我的问题是：＆＃34;替代＆＃39;替代＆＃39;指令的属性？＆＃34;或＆＃34;如何动态设置组件的根元素？＆＃34;。

由于

Answer 1

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

item { flex-grow: 1; }

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

item.selected { font-weight: bold; }

尽管如此，我不确定它与旧的IE版本的兼容性。

AngularJS 1.5组件和样式

1 个答案: