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

Posted 2023-05-09

【中文标题】根据从 Angular 组件返回的项目宽度动态设置容器的宽度

【英文标题】：Dynamically setting the width of a container based on item widths returned from an Angular component

【发布时间】：2017-10-14 09:11:52

【问题描述】：

我正在使用 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 路由器解决此问题的任何想法？

【问题讨论】：

我建议对属性类型指令做同样的事情。将它放在与 ng-repeat 相同的标签上。

为什么需要计算宽度？不能简单的css解决这个吗？也许你可以创建 plunk 演示问题 - 好像你正在尝试发明***......

@PetrAveryanov 我认为他可能在父容器中有其他东西，但他仍然希望它的宽度适合容器行的宽度。

列宽 300 像素，需要无限向右内联。我不知道有更好的方法来做到这一点，但在父容器上设置溢出-x，但为了让它们保持内联，列宽需要与列包装器宽度相匹配。 @PetrAveryanov

【参考方案1】：

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

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

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

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

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

【讨论】：

如果我删除宽度，它将返回给我浏览器窗口的宽度，而不是子 div 的总和。虽然尝试作为指令。

把它放在一个指令中适用于window.load，但这只是暂时的。这意味着它仅适用于第一页加载。一旦我浏览到具有相同组件的另一条路线，它就不起作用（因为页面没有再次加载）

我最终在 container-row 上使用了一个指令，并将计算放在 setTimeout 函数中。谢谢！