Question

我有使用git checkout master创建的组件，我希望它们是flex儿童：

ng-repeat

我的组件模板是：

<div style="display:flex; flex-wrap: wrap">
    <div ng-repeat="item in data" style="flex-basis: 30%">
        <my-component item="item"></my-component>
    </div>
<div>

它有点工作，但<div class="c"> ... </div>项目的高度并不像它们只是my-component那样。

我可以通过设置div来解决这个问题，但它会因为包装而混乱。

我可以使用AngularJS 1.5实现这种行为吗？

repro的附加代码：http://codepen.io/anon/pen/ENqvvO

谢谢！

Answer 1

问题在于，当使用组件时，你有一个新元素包装div.c元素，因此flex行为不会绑定你的css的两个元素。您的示例（来自plunkr）没有该组件，因为它之间没有my-component。

div.flex-container
    my-component // <- this guy is breaking off the flex connection
        div.c

为了解决此问题，您可以设置标记my-component而不是.c的样式，以便可以在div.flex-container和my-component之间直接应用此处。

实际上，我建议您创建一个容器组件和一个项目组件，以使事物保持清晰和稳固。

例如：

<list>
    <list-item>Item 1</list-item>
    <list-item>Item 2</list-item>
    <list-item>Item 3</list-item>
    <list-item ng-repeat="item in items"> {{ item }} </list-item>
</list>

还有：

<gallery>
    <gallery-item ng-repeat="photo in photos">
        <photo img="photo "></photo>
    </gallery-item>
</galery>

美丽，不是吗？：{d

带有AngularJS 1.5组件的Flexbox

1 个答案: