how do i bind a directive to an injected service instead of a parent or isolated scope?

Question

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

Basically, I have a nav outside of any views. The nav needs to display menu items which a user has access to.

I create the nav markup with a directive like so:

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

Where treeFamily is the data which will be used to build the navigation menu.

However, since my nav is outside of any views, it doesn't have a controller, so there is no scope variable called treeFamily. Which means the directive doesn't get any data to create a navigation.

I originally thought I could just inject a service with the data for the menu items, but then there is no way that I can see to tell an angular directive to use data taken from an injected service for binding.

The only other way that seems to be possible is to have a $rootScope variable called treeFamily and have the directive generated markup bind to that instead.

iConnor · Answer 1 · 2013-09-14T02:31:45.503

0

If you don't want to use a $rootScope variable here is a slightly hacky solution but you could get the scope by the element.

Example.

Say your data is applied to a test controller so you have a element like this

<div id="test" ng-controller="test">

You could do this example using jQuery (not required)

$('#test').scope().treeFamily

There it is you have access to the scope that you need to get your data from, demo in progress.

Demo: http://jsfiddle.net/hq26h/

In the demo the random directive is accessing the treeFamily data from the test controller when the directive is outside the controller.

If you wan't your service data to be bindable, you can do this

app.directive('something', function( $someNavDataService ) {
    return function( $scope ) {
       $scope.navData = $someNavDataService;
    }; 
});

edited Sep 14 '13 at 02:31

answered Sep 12 '13 at 22:51

iConnor

19,997
14
62
97

While your answer does fit the criteria in the OP, this solution feels worse than putting it in the $rootScope. One thing that comes to mind, it would mean I would have to have some element with a controller just for the purpose of the nav. In which case, I could just assign a parent controller and pass the data in. – ton.yeung Sep 14 '13 at 01:45
You don't have any data in a scope if you don't have a controller, so..... what? And incase you didn't see it, I said **here is a slightly hacky solution** – iConnor Sep 14 '13 at 02:27
It looks like there is some miscommunication here. In the OP, any references to scope is simply me saying that the solution I found used an isolated scope for binding the data. **I'm trying to bind data that is passed into the directive via a service**. I had thought I could create a variable in the isolated scope and assign the data from a service to it. That doesn't work. So now I'm soliciting ideas for how I can create a directive with data from a service. – ton.yeung Sep 14 '13 at 03:34

score 0 · Answer 2 · edited May 23 '17 at 10:31

I still think you want to have a look at angular-ui router, as mentioned I in your previous question

https://github.com/angular-ui/ui-router

However, the way I'd do this without angular-ui-router is to create the service, then just inject the service in to the directive when you declare that, and use the data in there as per http://docs.angularjs.org/guide/directive.

For example:

angular.module('yourModule').service('yourService', function() {
   // define your service
});

angular.module('yourModule').directive('yourDirective', function(yourService) {
  return {
     link: function postLink(scope, element, attrs) {
       // you can now define your directive and access your yourService service
     }
  };
});

how do i bind a directive to an injected service instead of a parent or isolated scope?

2 Answers2

Linked