How do I share scope between two directives in AngularJS?

Question

I want to share the $scope between the following two directives:

One23SRCApp.directive(\'directive1\',function() {
    return {
        restrict         


        

Answer 1

My suggestion would be to use a shared resource, e.g. a service. Services are singletons, meaning there is only ever one instance of each service, so you can use them to share data between directives, controllers, scopes and even when changing page through routing.

You would define the resource service like this:

app.factory("MyResource",function(){
    return {};
});

You could then inject that service into your directives (and controllers if need be) and use it like this.

One23SRCApp.directive('directive1', ['MyResource', function(MyResource) {
    return {
        restrict: "A",
        scope:true,
        link: function (scope, element, attrs) {
           var resource = MyResource;
           resource.name = 'Foo';
        }
    };
});
One23SRCApp.directive('directive2', ['MyResource', function(MyResource) {
    return {
        restrict: "A",
        link: function (scope, element, attrs) {
           var resource = MyResource;
           console.log(resource.name);
        }
    };
});

Directive2 will log 'Foo' since the resource is shared. Although make sure your directives are run in the correct order!

**

You could also do a two way data-binding from each directive into the parent scope (see Chandermani answer for that), but the above is a very useful and powerful way to get data where you need it without having to broadcast or keep track of exactly where things are in the html.

Edit: While the above is very useful when sharing info between controllers and routes, check out stevuu answer. It seems better for directives (although I have not tried it).