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: "A",
        scope:true,
        link: function (scope, element, attrs) {
           scope.tablename = "table";
        }
    };
});


One23SRCApp.directive('directive2',function() {
    return {
        restrict: "A",
           link: function (scope, element, attrs) {
           var tablename = scope.tablename;
        }
    };
})

In the HTML, I have:

<input type="text" directive2 placeholder="Search Models..."> 

<table directive1>
  <tr>
     <td>column1</td>
     <td>column1</td>
   </tr>
</table>

I have created the directive named "directive1" with isolated scope, assigning the name "table" to the scope.tablename property. I am not able access this scope property in the other directive.

So how can I access the scope of one directive in another?

Answer 1

AngularJS supports directive controllers, which are controllers that are shared between multiple directives that require the same controller. This allows you to access and modify tableConfig in any directive that requires that controller, without having to declare a separate service or event. For more information, look at "Creating Directives that Communicate" in the directives documentation.

This is how ngModel and ngForm work, for example.