How do I create a dynamic nav which gets allowed menu items passed to it?

问题

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: []
        }]
      }
    }

回答1:

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.

来源：https://stackoverflow.com/questions/18774978/how-do-i-create-a-dynamic-nav-which-gets-allowed-menu-items-passed-to-it