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

问题

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.

回答1:

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
     }
  };
});

回答2:

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;
    }; 
});

来源：https://stackoverflow.com/questions/18775263/how-do-i-bind-a-directive-to-an-injected-service-instead-of-a-parent-or-isolated

标签

angularjs

angularjs-directive