Q: How to access more than 2 DOM elements "The AngularJS way"? I'm starting to learn angularJS better, and I've noticed that AngularJS tries to make strong emphasis on separating the view from the controller and encapsulation. One example of this is people telling me DOM manipulation should go in directives. I kinda got the hang of it now, and how using link functions that inject the current element allow for great behavior functionality, but this doesn't explain a problem I always encounter. 
Example:
I have a sidebar I want to open by clicking a button. There is no way to do this in button's directive link function without using a hard-coded javascript/jquery selector to grab the sidebar, something I've seen very frowned upon in angularJS (hard-coding dom selectors) since it breaks separation of concerns. I guess one way of getting around this is making each element I wish to manipulate an attribute directive and on it's link function, saving a reference it's element property into a dom-factory so that whenever a directive needs to access an element other than itself, it can call the dom-factory which returns the element, even if it knows nothing where it came from. But is this the "Angular way"? 
I say this because in my current project I'm using hard-coded selectors which are already a pain to mantain because I'm constantly changing my css. There must be a better way to access multiple DOM elements. Any ideas?

A: Well, if you have a directive on a button and the element you need is outside the directive, you could pass the class of the element you need to toggle as an attribute
<button my-directive data-toggle-class="sidebar">open</button>

Then in your directive
App.directive('myDirective', function() {
    return {
        restrict: 'A',
        link: function(scope, element, attrs) {
            angular.element('.' + attrs.toggleClass).toggleClass('active');
        }
    };
}

You won't always have the link element argument match up with what you need to manipulate unfortunately.  There are many "angular ways" to solve this though.  
You could even do something like:
<div ng-init="isOpen = false" class="sidebar" ng-class="{'active': isOpen}" ng-click="isOpen = !isOpen">
    ...
</div>


A: The best way for directive to communicate with each other is through events. It also keeps with the separation of concerns. Your button could $broadcast on the $rootScope so that all scopes hear it. You would emit and event such as sidebar.open. Then the sidebar directive would listen for that event and act upon it.

A: There are a number of ways to approach this. 
One approach, is to create a create a sidebar directive that responds to "well-defined" broadcasted messages to open/close the sidebar.
.directive("sidebar", function(){
  return {
    templateUrl: "sidebar.template.html",
    link: function(scope, element){
      scope.$root.$on("openSidebar", function(){
         // whatever you do to actually show the sidebar DOM content
         // e.x. element.show();
      });
    }
  }
});

Then, a button could invoke a function in some controller to open a sidebar:
$scope.openSidebar = function(){
   $scope.$root.$emit("openSidebar");
}

Another approach is to use a $sidebar service - this is somewhat similar to how $modal works in angularui-bootstrap, but could be more simplified.
