Angular 1 组件内的 Angular 1 Material FAB 不粘在右下角答案

【问题标题】：Angular 1 Material FAB inside Angular 1 component not sticking bottom rightAngular 1 组件内的 Angular 1 Material FAB 不粘在右下角
【发布时间】：2016-12-08 16:32:44
【问题描述】：

在我的主页上，我使用 Angular 1 Material 和 ui-router：

<body layout="column">
  <md-button class="md-fab md-raised md-primary md-fab-bottom-right" aria-label="Add Test">
    <md-icon>add</md-icon>
  </md-button>
  <md-content>
    <ol>
      <li>foobar</li>
      <!--repeat a bunch of times-->
    </ol>
  </md-content>
</body>

这在右下角给了我一个浮动的 FAB，用于添加一个 foobar。当我向上滚动列表时，FAB 将保持不变。正是我想要的。

但是如果我将那个确切的内容放在一个组件中，它会搞砸滚动！

<body layout="column">
  <my-component></my-component>
</body>

如果组件具有完全相同的内容，只需移动到组件模板，fab 就会显示在基本上正确的位置……但是当我向上滚动列表时，FAB 会随之向上滚动！

如果我随意添加<md-content> 的各个层，我可以让FAB 显示在列表的底部，如果大于视口意味着FAB 出现在下面屏幕（甚至更糟） --- 仍然会随着列表向上滚动。

简而言之，创建 Angular 组件的存在完全搞砸了 FAB 放置，并将其锁定到列表中，以便它随列表滚动。

帮助！这是非常大的。我不能将我所有的 FAB 从它们的组件中分离出来，并将它们分别放在主页上，并根据当前状态/窗口/其他内容使用一些奇怪的显示/隐藏指令。我该如何解决这个问题？

【问题讨论】：

标签： angularjs angular-ui-router angular-material floating-action-button

【解决方案1】：

md-fab-bottom-right CSS 类使 FAB 成为 position: absolute，因此它被定位在带有 position: relative 的链上的下一个 DOM 元素中。在您的情况下，这是<body>。看来您希望 FAB 始终位于 md-list 视口的底部。因此，您必须将 FAB 和 md-list 放在另一个 md-content 中。 md-content 提供了一个 relative 包装器。

重要的是还要在外层md-content上加上flex layout="column"。

<!-- in component template -->
<div layout="row">
  <md-content flex layout="column">
    <md-button class="md-fab md-raised md-primary md-fab-bottom-right" aria-label="Add FooBar">
      <md-icon>add</md-icon>
    </md-button>
    <md-content>
      <md-list>
        <md-list-item class="md-2-line" ng-repeat="foobar in $ctrl.getFooBars()" ng-click="null">
          <div class="md-list-item-text">
            <h3>{{foobar.id}}</h3>
            <p>foobar</p>
          </div>
        </md-list-item>
      </md-list>
    </md-content>
  </md-content>

  <md-sidenav md-component-id="add-foobar" class="md-sidenav-right">
    <create-foobar-component></create-foobar-component>
  </md-sidenav>
</div>

我做了一个代码笔来显示这个：http://codepen.io/kuhnroyal/pen/mRyqVW

如果这没有帮助，请添加代码笔或可以重现您的问题的东西。

更新 1： 在使用组件和 ui-router 时，您可能还会遇到我几个月前创建的这个问题：https://github.com/angular-ui/ui-router/issues/2838

更新 2： 默认情况下，您的 Angular 组件是一个自定义 HTML 标记，其行为类似于 div（因为它默认具有 display: block）。要使 angular-material 起作用，您需要保持一个从上到下具有 flex 和 layout="column|row" 的 DOM 结构。因此，如果您使用的是 ui-router 模板，请参阅更新 1，否则将其添加到您的 Angular 组件模板中。

【讨论】：

你只是在页面上随意放置这个内容。当然，我可以做到。问题是将其放入组件模板中，并将其与 ui-router 状态相关联，在该状态下，主页上的部分将替换为该组件。
使用 ui-router 或组件与问题无关。这是一个基本的角材料问题。我改进了答案，以明确将其放入组件模板中。
不走运。我完全使用了您显示的内容，但我仍然遇到问题。你是对的，它不是 ui-router ---我意识到我已经在使用 ui-router 的模板了。问题在于使用<my-component></my-component>，我什至可以将其粘贴在第一页上。如果我复制文字组件模板内容，它就可以工作。如果我使用 <my-component></my-component> 它会中断。
我解决了！！！！ kuhnroyal 在您上面的示例中，您在组件模板中显示了<div layout="row"> 。但事实证明，关于<my-component>（这是一个出现在组件模板之外的标签）的某些内容与<div> 完全一样，并且把事情搞砸了。我不得不从模板中删除<div layout="row"> 并在主文档中使用<my-component layout="row">。是的，我必须将layout="row" 放在组件声明本身上！！这是我让它工作的唯一方法。你有 cmets，你能澄清一下，甚至改进我的解决方案吗？
查看更新的答案。 layout="row" 只是取自您之前的示例，它当然取决于您的布局。

【解决方案2】：

因此，带有 FAB 的 Angular 1.5 布局是我很长时间以来见过的最乏味、最脆弱的东西之一。

我想要一个固定的工具栏和标签集，下面有一个滚动列表。该列表应该在一个组件中，并且应该维护自己的 FAB。列表组件应由 ui-router 放置。哦，痛苦。

这是解决方案 --- column/row/md-content/div what-have-you 的唯一组合将起作用。更改其中任何一个都会使整个事情发生。

这是主页：

<body layout="column">
  <md-toolbar>
    <div class="md-toolbar-tools">
      <h1>Foo</h1><span flex></span><small>bar</small>
    </div>
  </md-toolbar>

  <md-tabs md-border-bottom>
    <md-tab label="FooBar" ui-sref="foobar"></md-tab>
  </md-tabs>

  <div ui-view flex layout="column"></div>

</body>

这是 ui-router 状态：

$stateProvider.state({
    name: "foobar",
    url: "/foobar",
    template: "<foobar-widget layout='row'/>"
});

这里是FoobarWidget-template.html：

<md-content flex layout="column">
  <md-button ngclass="md-fab md-raised md-primary md-fab-bottom-right" aria-label="Add Foobar">
    <md-icon>add</md-icon>
  </md-button>
  <md-content>
    <md-list>
      <md-list-item ng-repeat="foobar in $ctrl.getFoobars()" ng-click="null">
        <!-- list-item content -->
      </md-list-item>
    </md-list>
  </md-content>
</md-content>

注意layout="column"和layout="column"系列的顺序。当您添加<ui-view> 的额外层，然后将<foobar-widget> 组件放入其中时，它变得特别棘手，但您仍然必须将<md-content> 包裹在<ui-view> 周围。这些层中的每一层都必须考虑在内，否则它会抛弃整个事情。请注意，根据 kuhnroyal 的进一步建议，我从 <md-content layout="column"><ui-view layout="column"></ui-view></md-content> 改进为 <div ui-view flex layout="column"></div>。

在某些情况下，问题不在于 FAB 没有与块的底部右侧关联；这是父项允许块垂直扩展，因此出现的滚动可能来自其父级，包含扩展块，其中包含 FAB 的内容。或类似的东西。我希望这继续有效。我不想再玩这个了。

kuhnroyal 在他的回答中给了我解决方案的提示，他指向ui-router issue 的链接让我了解到仅在 ui-router 状态模板中使用该组件的可能性，看看我是否可以将布局按摩成某种东西那行得通。所以我很乐意给 kuhnroyal 赏金，即使他的回答对于我的情况并不完全是即插即用的。感谢您的回复！

【讨论】：

我认为您不需要在ui-view 周围添加md-content，您可以从ui-view 中删除layout="column"，它没有效果，因为它会被您的模板替换。您还应该将flex 添加到您的foobar-widget。始终在要弯曲的元素上使用 flexinside of layout="row|column" 块。
“我认为你不需要 ui-view 周围的 md-content...”我很确定如果没有这个，工具栏和选项卡将向上滚动而不是“卡住” “到顶部。你试过了吗？ “...您可以从 ui-view 中删除 layout='column'”。你试过了吗？ “......因为它被你的模板取代了。”我 90% 确定它会保留在 DOM 中，而且从 ui-view 中删除 layout="column" 会破坏事情。但我不是 100% 确定。这一切都非常棘手......
你是对的，ui-view 保留。我建议用一个元素<div ui-view flex layout="column"></div> 替换<md-content> 和<ui-view>，你不需要<md-content>，一个简单的<div> 就足够了。您还应该阅读 ui-router 组件路由，这进一步简化了其中的一些。 ui-router.github.io/guide/ng1/route-to-component
是的，<div ui-view flex layout="column"></div> 似乎有效，谢谢。