Question

我最近对famo.us和角度进行了刺伤。我喜欢它，但是我有问题让我的sidenav以我想要的方式工作。

Sidenav menu items with sub menu item

当我单击任何Test1-3菜单项时，我希望子菜单项从它们下面滑开。我还没有实现任何滑动，因为我目前的问题是没有孩子似乎尊重布局的fa-index。

更新：孩子加载和卸载都很好，只是它们总是出现在菜单项的底部，而不是在它们下面。我是否对fa-modify标签做错了什么？如果我在角度工作，我很确定我的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，想知道我是否应该从控制器生成带有相应子菜单的菜单..

Answer 1

长话短说，这个功能很可能不会在着名/角度整合中实现，简单。

由于famo.us正在对他们的引擎进行重大修改，我将离开这一尝试，而着名/角色则留在尘埃中。对于任何阅读的人，我建议在他们的新引擎开发得足够好的一年内再次研究famo.us和angular。

This (somewhat hidden) announcement来自famo.us的Zack Brown。

Famo.us/Angular的未来

我可以对Famous的未来有所了解   AngularJS，以及我们为达成这一决定所采取的道路。

Famo.us/Angular是一个集成库。其根源深入人心   进入两个集成库（Famo.us 0.3和Angular 1.x）   它的实现非常特定于那些特性   两个图书馆。一些示例集成：

修补Angular的动画和生命周期系统以触发和   处理修复Angular指令的Famo.us动画   编译系统首先构建Famo.us渲染树   创建允许Famo.us事件管道进入的指令   底层Famo.us渲染节点支持Angular的事件管道   （例如，ng-click on Famo.us Surfaces）支持ng-repeating   将元素转换为Famo.us Scrollview或GridLayout处理案例   在Famo.us中使用ng-show和ng-if使整个过程表现良好   在Angular的消化周期的约束下。等等   只是我们在建造时遇到的许多冒险中的一小部分   Famo.us/Angular。现在让我们带来四个不同的库   混合：

Famo.us 0.3 Famous Engine，a.k.a。＆＃34;混合模式，＆＃34; a.k.a. 0.5.0 Angular   1.x Angular 2完全支持{Famo.us 0.3，Famous Engine}之间的集成x {Angular 1.x，Angular 2}需要四个完全支持   不同的集成库。显然，这不可能。

不推荐使用Famo.us 0.3。因此，我们可以排除将其与之整合   Angular 2.然后问题变成：我们应该编写一个集成   Engine和Angular 1.x之间，或Engine和Angular 2之间，还是两者兼而有之？   在我们处理它的同时，我们是否应该与React建立集成？同   烬？使用Backbone？秘银？泡沫？   插入的JavaScript框架，杜怨妇？

答案是，我们绝对计划支持所有这些，但我们   不想（并且不能承受）从头开始写作   与所有人融为一体。

那么诀窍是什么？

如果我们的工作正确，没有人会写重量级的   像这样整合。

我们（着名的）必须编写＆＃34;一个集成来支持他们所有＆＃34; -   我们不想将Famous Engine与AngularJS整合在一起;我们想   以这种方式将Famous Engine与Web创作标准集成在一起   使用Famous，比如Angular或React - 甚至只是   Bootstrap很简单。好消息：我们已经写好了。这是我们的   框架层。（哦，那就是为什么Engine被称为Engine-it的原因   着名项目的两个层次：引擎和框架。）

这个框架是什么样的？

它支持HTML作为创作语言。这是关键，因为它允许   混合在内部和外部的其他应用程序/框架中   着名的渲染树。

它公开了非常清晰，易于使用的操作界面   着名的组件。这允许来自任何其他的逻辑   应用程序/框架与Famous一致，   可预测的，可扩展的方式。

它支持在任何需要的地方传递给原始的Famous Engine。

支持灵活地传入和传出Famous或HTML，以及   允许轻松使用CSS和其他资产（图像，字体，其他   介质。）

换句话说：编写与框架的Angular集成将   比使用直接引擎写入更简单。我强烈地说   鼓励任何对Angular＆lt;＆gt; Famous集成感兴趣的人   等待Famous的其余部分即框架发布。

什么时候？

截至目前（2015年6月）框架仍处于私人测试阶段。我们是   邀请任何有兴趣的人以及可以让他们到现场的人   在SF与我们在着名实验室合作，以测试框架和   直接向框架团队获取/提供反馈。

我们将在jQuerySF上发布关于Framework的声明   六月底。我们很有可能会发布我们的公开测试版   那个日期。

如果您对私人感兴趣，可以通过zack@famo.us与我联系   Beta或更多信息。

嵌套修饰符ng-repeats不尊重$ index？

1 个答案: