Angularjs 角1材料制造厂内角1部件不粘右下角_Angularjs_Angular Ui Router_Angular Material_Floating Action Button

Angularjs 角1材料制造厂内角1部件不粘右下角

angularjs angular-material

Angularjs 角1材料制造厂内角1部件不粘右下角,angularjs,angular-ui-router,angular-material,floating-action-button,Angularjs,Angular Ui Router,Angular Material,Floating Action Button,在我的主页上，我有一个带有ui路由器的Angular 1材质： <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

在我的主页上，我有一个带有ui路由器的Angular 1材质：

<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>


添加
福巴

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

但是，如果我把确切的内容放在一个组件中，它会破坏滚动

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

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

如果我到处乱搞并添加不同层次的

，我可以让晶圆厂显示在列表底部，如果晶圆厂大于视口，则意味着晶圆厂显示在屏幕下方（甚至更糟）--并且仍然随着列表向上滚动

简言之，关于创建角度组件的存在完全搞乱了晶圆厂的位置，并将其锁定到列表中，以便与列表一起滚动

救命啊！这个很大。我不能把我所有的晶圆厂从它们的组件中分离出来，并将它们分别放在主页上，根据当前状态/windows/任何东西，使用一些奇怪的show/hide指令。如何解决这个问题？

md fab右下CSS类使fab

position:absolute

，因此它被定位在链上的下一个DOM元素中，位置为

position:relative

。在您的情况下，这就是

。似乎您希望晶圆厂始终位于

md列表的底部。
因此，您必须将FAB和md列表
放入另一个md内容
中md content
提供了一个relative
包装器
重要的是在外部md内容上添加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>


添加
{{foobar.id}
福巴

我制作了一个代码笔，显示了以下内容：
如果这没有帮助，请添加一个代码笔或一些可以重现您的问题的东西
更新1:
通过使用组件和ui路由器，您可能还会遇到我几个月前创建的问题：
更新2:
默认情况下，角度组件是一个自定义HTML标记，其行为类似于div
（因为默认情况下它具有display:block
）。要使角度材质正常工作，您需要保持一个DOM结构，该结构具有从上到下的flex
和layout=“column | row”
特性。因此，如果您正在使用ui路由器模板，请参阅更新1，否则请将其添加到角度组件模板。
因此，带晶圆厂的角度1.5布局是我很久以来看到的最乏味、最脆弱的事情之一
我想要一个固定的工具栏和标签，下面有一个滚动列表。列表应该在一个组件中，并且应该维护自己的FAB。列表组件应由ui路由器放置。哦，痛
这里是解决方案——列/行/md content/div what have的唯一组合。改变其中任何一个都会把事情搞砸
以下是主页：
<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>

注意layout=“column”
和layout=“column”
系列的顺序。当您添加额外的
层，然后在其中放置
组件时，这会变得特别棘手，但您仍然必须在
周围缠绕
。这些层中的每一层都必须解释清楚，否则它会把整个事情抛诸脑后。注意，根据kuhnroyal的进一步建议，我从
改进为

在某些情况下，问题并不是晶圆厂没有与底部、块的右侧相关联；这是因为父对象允许块垂直扩展，所以出现的滚动可能来自它的父对象，包含扩展的块，其中包含有FAB的内容。或者类似的。我希望这能继续奏效。我不想再胡闹了
kuhnroyal在他的回答中给了我解决方案的提示，他与a的链接让我意识到了在ui路由器状态模板中使用该组件的可能性，看看我是否可以将布局调整为有效的布局。所以我很乐意给库恩罗亚尔赏金，尽管他的回答并不完全符合我的情况。感谢您的回复
 你只是随意地把这些内容放在页面上。当然，我能做到。问题是将其放在组件模板中，并将其绑定到ui路由器状态，在该状态下，主页上的某个部分将替换为该组件。ui路由器或组件的使用与问题无关。这是一个基本的角度材料问题。我改进了答案，让它清楚地进入组件模板。不走运。我用的正是你展示的，我仍然明白这个问题。你是对的，它不是ui路由器——我意识到我已经在使用ui路由器的模板了。问题在于使用
，我甚至可以将其粘贴到第一页。如果我复制文本组件模板内容，它就会工作。如果我使用
它会崩溃。我解决了它！！！！在上面的示例中，您在组件模板中显示了
。但事实证明，
（出现在组件模板之外的标记）的某些功能与
的功能完全相同，并且会把事情搞砸。我不得不从模板中删除
，并在主文档中使用
。是的，我必须在组件声明本身上添加layout=“row”！！这是我能让它工作的唯一方法。你有意见吗？你能澄清这一点，甚至改进我的解决方案吗
$stateProvider.state({
    name: "foobar",
    url: "/foobar",
    template: "<foobar-widget layout='row'/>"
});

<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>