根据从 Angular 组件返回的项目宽度动态设置容器的宽度

Question

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

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

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

.container div 是绝对定位的，.container-row div 应用了任意 10,000 像素，以确保内容永远不会换行（水平滚动站点）。我不想将 .container-row 设置为 10000px，而是想遍历项目并计算容器的宽度。这带来了一些问题。该组件显示在多个路由上，因此我需要根据 UI 路由更改计算此组件。

如果我在 jQuery 中执行此操作，它会看起来像这样

$(window).load(function() {
   // This works only on window.load which isn't helpful for angular...

   var containerWidth = 0;
   $('.c-key').each(function() {
     containerWidth += $(this).outerWidth();
   });

   $('.container-row').css({
    'width': containerWidth,
    'min-width': '100vh'
    });
});

即使在 run 函数中，这也不起作用。关于如何使用组件和 UI 路由器解决此问题的任何想法？

Answer 1

创建一个属性指令，删除容器行的固定宽度，然后使用角度 jquery 别名获取它的宽度，如下所示：

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

然后将其应用到它的父容器：

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

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