【发布时间】:2015-09-27 20:29:04
【问题描述】:
我最近对 famo.us 和 angular 进行了尝试。我喜欢它,但我在让我的 sidenav 按我想要的方式工作时遇到了问题。
当我单击任何 Test1-3 菜单项时,我希望子菜单项从它们下方滑动打开。我还没有实现任何滑动,因为我目前的问题是似乎没有孩子尊重布局的 fa-index。
更新:子项加载和卸载都很好,只是它们总是出现在菜单项的底部,而不是它们的下方。我对 fa-modify 标签做错了吗?如果我在 Angular 中工作,我很确定我的 ng-repeats 会在此设置下按预期工作。
<fa-app>
@*<fa-grid-layout fa-options="myGridLayoutOptions">*@
<fa-sequential-layout fa-options="navCtrl.sequentialOptions">
<fa-modifier ng-repeat="item in admin" fa-size="[true, true]" @*fa-size="[true, undefined]"*@ @*fa-proportions="[1, 1]"*@>
<fa-surface>
<md-list-item ng-click="navCtrl.toggleMenuExpand($index)" @*ng-click="go(item.link)"*@>
<a>
<md-item-content md-ink-ripple layout="row">
<div class="inset">
<ng-md-icon icon="{{item.icon}}"></ng-md-icon>
</div>
<div class="inset">
{{item.title + " " + $index}}
</div>
</md-item-content>
</a>
</md-list-item>
</fa-surface>
<fa-modifier ng-if="item.active" ng-repeat="submenuItem in item.submenu">
<fa-surface fa-index="1">
<md-list-item ng-click="go(submenuItem.link)">
<a>
<md-item-content md-ink-ripple layout="row">
<div class="inset">
<ng-md-icon icon="{{submenuItem.icon}}"></ng-md-icon>
</div>
<div class="inset">
{{submenuItem.title + " " + $index}}
</div>
</md-item-content>
</a>
</md-list-item>
</fa-surface>
</fa-modifier>
</fa-modifier>
</fa-sequential-layout>
@*</fa-grid-layout>*@
</fa-app>
我将如何正确地使所有子项正确显示在每个菜单项下方?
这里是每个菜单项的数组,只是为了澄清。
var adminmenus = [
{
link: '/overview',
title: 'Test1',
icon: 'settings',
active: true,
submenu: [{ link: '/overview', title: 'Test1SubTest1', icon: 'settings', active: false }]
},
{
link: '/overview',
title: 'Test2',
icon: 'settings',
active: false,
submenu: [{ link: '/overview', title: 'Test2SubTest1', icon: 'settings', active: false }]
},
{
link: '/handover',
title: 'Test3',
icon: 'attach_money',
active: false,
submenu: [{ link: '/overview', title: 'Test3SubTest1', icon: 'settings', active: false }]
}
];
更新:我是否可能以错误的方式看待 famo.us 实现?我看到this answer,想知道我是否应该从控制器生成带有适当子菜单的菜单..
【问题讨论】:
标签: asp.net-mvc angularjs famo.us angular-material