Angular 1 Material FAB inside Angular 1 个组件没有粘在右下角

Question

在我的主页上，我用 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 显示在列表底部，如果它大于viewport 意味着 FAB 出现在屏幕下方（甚至更糟）--- 并且仍然随着列表向上滚动。

简而言之，关于创建 Angular 组件的一些事情完全搞砸了 FAB 放置，并将其锁定到列表，以便它随列表滚动。

求助！这是非常大的。我无法将我所有的 FAB 从它们的组件中分离出来，并根据当前的 state/windows/whatever 使用一些奇怪的 show/hide 指令将它们单独放在主页上。我该如何解决这个问题？

Answer 1

md-fab-bottom-right CSS-class 使 FAB position: absolute 并且因此它被定位在链上的下一个 DOM 元素内 position: relative。在你的例子中是 <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

更新二： 您的 angular 组件默认是一个自定义 HTML 标签，其行为类似于 div（因为它默认具有 display: block）。要使 angular-material 正常工作，您需要保留一个 DOM 结构，该结构从上到下具有 flex 和 layout="column|row"。因此，如果您正在使用 ui-路由器模板，请参阅更新 1，否则将其添加到您的 angular 组件模板中。

Answer 2

所以 Angular 带有 FAB 的 1.5 布局是我很长时间以来看到的最乏味、最脆弱的东西之一。

我想要一个固定的工具栏和选项卡集，下面有一个滚动列表。该列表应该在一个组件中，并且它应该维护自己的 FAB。列表组件应由 ui-router 放置。哎呀，疼。

这是解决方案 --- 唯一可行的 column/row/md-content/div 组合。更改其中任何一项都会使整个事情发生变化。

这是主页：

<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-路由器状态：

$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> 组件时，它变得特别棘手，但您仍然必须在 <ui-view> 周围包裹一个 <md-content>。这些层中的每一层都必须考虑在内，否则它会抛弃整个事情。请注意，我根据 kuhnroyal 的进一步建议从 <md-content layout="column"><ui-view layout="column"></ui-view></md-content> 改进为 <div ui-view flex layout="column"></div>。

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

kuhnroyal 在他的回答中给了我解决方案的提示，他对 ui-router issue 的 link 让我明白了在 ui-router 中使用该组件的可能性状态模板，看看我是否可以将布局按摩成有效的东西。所以我很乐意给 kuhnroyal 赏金，即使他的回答对我的情况来说并不是完全即插即用。感谢您的回复！

Angular 1 Material FAB inside Angular 1 个组件没有粘在右下角

Angular 1 Material FAB inside Angular 1 component not sticking bottom right

angularjs

angular-ui-router

floating-action-button

angular-material