Thursday, 12 September 2013

Is it possible to access instances of a directive from inside the directive definition?

Is it possible to access instances of a directive from inside the
directive definition?

I am trying to create a directive for drawers that can be used in my
application. What I want to do is this: When the user opens one drawer, I
need any other currently open drawers to close.
This is my current code:
Markup
<a href="javascript:;" id="my_switch">
Click me to toggle the drawer!
</a>
<drawer data-switch="#my_switch">
Content of the first drawer
</drawer>
<a href="javascript:;" id="my_other_switch">
Click me to toggle the other drawer!
</a>
<drawer>
Content of the second drawer
</drawer>
Drawer.html
<div class="drawer_container">
<div class="drawer" ng-transclude>
</div>
</div>
Directive
MyApp.directive('drawer', function(DrawerService){
return {
restrict: 'AE',
replace: true,
transclude: true,
templateUrl: 'drawer.html',
link: function(scope, element, attributes){
var drawer_switch = $(attributes.switch);
var drawer = $(element).find('.drawer');
var toggle = function(event){
drawer.toggle();
};
drawer_switch.bind('click', toggle);
}
};
});
Is it possible for the opening of one drawer to cause the rest of the
drawers to close by using only the directive?

No comments:

Post a Comment