如何创建一个动态导航它获取传递给它允许菜单项？ [英] How do I create a dynamic nav which gets allowed menu items passed to it?

问题描述

有关构建实际的导航，我喜欢这种方法： http://jsfiddle.net/xUsCc/1/ ，我发现在这里：递归在角指令的，也创造了一个跟进问题在这里：<一href=\"http://stackoverflow.com/questions/18775263/how-do-i-bind-a-directive-to-an-injected-service-instead-of-a-parent-or-isolated\">how我做一个绑定指令注入的服务，而不是父母或孤立的范围是什么？

的问题是，该指令从上标记的属性，这是在父范围的范围的变量，像这样获取数据：

 ＆LT;树家庭=treeFamily＆GT;＆LT; /树＆GT;
 

导航栏坐在视图外，所以不存在范围，以获得从一个变量，比rootscope其​​他。

我在想，我可以注入一些工厂/服务，有用户被允许访问的菜单项。我试图在隔离范围内设置一个范围的变量，但刚杀任何渲染。我猜角不喜欢在隔离范围设置任何变量

 范围：{家庭：{
        名称：父，
        孩子：[{
            名称：Child1
            孩子：[{
                名称：Grandchild1
                孩子：[]
            }，{
                名称：Grandchild2
                孩子：[]
            }，{
                名称：Grandchild3
                孩子：[]
            }]
        }，{
            名称：CHILD2
            孩子：[]
        }]
      }
    }
 

解决方案

如果你真的需要递归指令东西从模型中的 $ rootScope 似乎是对其进行初始化正确的解决方案。

如果您的菜单只有两个级别我只想把它包装成一个控制器，从 $ rootScope 获取数据，或添加到 $ rootScope 一些方法允许控制在你的菜单中的项目（如 Addsection的（）， remoteSection（）等）。

您也可以使用服务来让你的不同组件之间的通信。

For building the actual navigation, I like this approach: http://jsfiddle.net/xUsCc/1/, which I found here: Recursion in Angular directives, also created a follow up question here: how do i bind a directive to an injected service instead of a parent or isolated scope?

The problem is that the directive gets its data from an attribute on the markup, which is a scope variable on the parent scope, like so:

<tree family="treeFamily"></tree>

The navigation bar sits outside the view, so there is no scope to get a variable from, other than the rootscope.

I was thinking that I could inject some factory/service that has the menu items the user is allowed to access. I tried setting a scope variable in the isolated scope, but that just killed any rendering. I guess angular doesn't like setting any variables in the isolated scope

    scope: {family: {
        name : "Parent",
        children: [{
            name : "Child1",
            children: [{
                name : "Grandchild1",
                children: []
            },{
                name : "Grandchild2",
                children: []
            },{
                name : "Grandchild3",
                children: []
            }]
        }, {
            name: "Child2",
            children: []
        }]
      }
    }

解决方案

If you really need the recursive directive stuff initializing it from a model in the $rootScope seems to be the right solution.

If your menu has only two levels I would simply wrap it into a controller that gets its data from the $rootScope or adds to the $rootScope some methods allowing to control the items in your menu (e.g. addSection(), remoteSection(), etc).

Your could also use a Service to allow communication between your different components.

这篇关于如何创建一个动态导航它获取传递给它允许菜单项？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！