【问题标题】:Nested modifier ng-repeats do not respect $index?嵌套修饰符 ng-repeats 不尊重 $index?
【发布时间】: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


    【解决方案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 事件管道到 支持 Angular 事件管道的底层 Famo.us 渲染节点 (例如,ng-click 在 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,又名“混合模式”,又名 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 建立一个集成吗?和 余烬?带骨干?秘银?泡沫? Insert-JavaScript-Framework-Du-Jour?

    答案是,我们绝对计划支持所有这些,但我们 不想(也负担不起)从头开始写 与所有这些集成。

    那么有什么诀窍呢?

    如果我们做对了,没有人会写一篇重量级的文章 再次像这样集成。

    我们(在 Famous 公司)必须编写“一个集成来支持所有这些”—— 我们不想将 Famous Engine 与 AngularJS 集成;我们想 以这种方式将 Famous Engine 与 Web 创作标准集成 将 Famous 与 Angular 或 React 一起使用——甚至只是 Bootstrap——很简单。好消息:我们已经在编写它了。是我们的 框架层。 (哦,这就是引擎被称为引擎的原因——它是一个 著名项目的两层:引擎和框架。)

    这个框架是什么样的?

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

    它提供了非常清晰、易于使用的操作界面 著名的组件。这允许来自任何其他的逻辑 以一致的方式与 Famous 交互的应用程序/框架, 可预测且可扩展的方式。

    它支持在任何需要的地方通过原始 Famous Engine。

    支持灵活地传入传出Famous或HTML,并且 允许轻松使用 CSS 和其他资产(图像、字体、其他 媒体。)

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

    那是什么时候?

    截至目前(2015 年 6 月),Framework 仍处于私有测试阶段。我们是 邀请任何有兴趣并且可以到现场的人 在 SF 与我们在 Famous Labs 合作测试框架和 直接与框架团队获取/提供反馈。

    我们将在 jQuerySF 上发布关于框架的公告 六月末。我们很有可能会在 那个日期。

    如果您对 Private 感兴趣,可以通过 zack@famo.us 与我联系 测试版或更多信息。

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 2019-08-30
      • 2017-07-25
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2020-07-24
      • 1970-01-01
      相关资源
      最近更新 更多