0

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: []
        }]
      }
    }
Community
  • 1
  • 1
ton.yeung
  • 4,793
  • 6
  • 41
  • 72

1 Answers1

0

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.

ovmjm
  • 1,624
  • 12
  • 15
  • How would I use the service to get the data to my nav though? usually a controller would call the service to get the data, set the data on the scope, and then the markup would pass the scope variable to the directive. I don't have a controller to do all of that. – ton.yeung Sep 12 '13 at 22:09
  • You can access $rootScope in the app.run() function. Typically I configure things inside my rootscope (things that would otherwise be in a controller if root had a controller) inside .run(). For example app.run(function($rootScope) { // stuff in here }); – Mike Driver Sep 12 '13 at 22:25
  • yea, that seems to be the only way this will work.. which feels wrong.. but looks like that's how angularjs rolls – ton.yeung Sep 12 '13 at 22:28
  • Both directives, services, run block and controllers can access to both $rootScope and any service. You are free to do what ever you want. Connecting components in Angular is very flexible. You can even use angular events. – ovmjm Sep 12 '13 at 22:31
  • It does feel a bit wrong. I'd recommend taking a look at using angular-ui's $state / $stateProvider. It allows you to use nested routing or "states" each of which can have a controller (or not). As a result I then create a 'root' state which all other states are children of, then you get a controller for your root state and things feel a bit nicer. It's really easy to access parent state's $scope from a child and vice versa. https://github.com/angular-ui/ui-router - the documentation on the wiki for ui-router is also very good. – Mike Driver Sep 12 '13 at 22:32
  • @Mike would you mind posting the answer on the linked post here, also? It feels like we're hijacking this guy's answer. – ton.yeung Sep 14 '13 at 01:48