Jquery 基于从角度组件返回的项目宽度动态设置容器的宽度

我使用AngularJS1.6和UI路由器进行路由。我试图创建一个完全水平的布局。它基本上是来自角度服务的内容的“提要”，它使用一个组件循环遍历每个项目并输出它

我的问题是如何动态计算所有项目宽度的总和，并将其应用于容器。下面是一个html示例

<div class="container">
  <div class="container-row">
    <keyfeed>
      <!-- NG repeat results -->
      <div>Column 1</div>
      <div>Column 2</div>
    </keyfeed>
  </div>
</div>

---

这甚至在run函数中也不起作用。关于如何使用组件和UI路由器解决此问题，有什么想法吗？

创建一个属性指令，删除容器行的固定宽度，然后使用angular jquery alias获取其宽度，类似这样：

angular.element('container-row').scrollWidth

然后将其应用于其父容器：

angular.element('container').css({
    'width': theNewValue,
});

---

选择器取决于您放置指令的位置和方式。

我建议对属性类型指令也这样做。将其放置在与ng-repeat相同的标签上。为什么需要计算宽度？简单的css不能解决这个问题吗？也许你可以制造plunk演示问题——似乎你在试图发明轮子…@PetrAveryanov我想他在父容器中可能有其他东西，但他仍然希望它的宽度适合容器行的宽度。列的宽度为300px，并且它们需要无限向右侧内联。我不知道有什么更好的方法可以做到这一点，但是在父容器上设置overflow-x，但是为了使它们保持内联，列宽需要与列包装器宽度匹配@Petraveryanovi如果删除宽度，它将返回浏览器窗口的宽度，而不是子div的总和。但尝试作为一个指令。将其放入一个指令可以使用window.load，但这只是暂时的。这意味着它只在第一页加载时起作用。当我浏览到另一个带有相同组件的路由时，它就不起作用了（因为页面没有再次加载），最后我在容器行上使用了一个指令，并将计算放在setTimeout函数中。谢谢

angular.element('container').css({
    'width': theNewValue,
});