directive-using-element-registry.js

app.directive('myOverlayer', function(ElementRegistry){
      
  return {
    link: function(scope, element, attrs){
      
      var content, background,
          registry = new ElementRegistry(scope);
      
      registry.find('button', function(button){
        button.on('click', function(){
          scope.overlayShowing = !scope.overlayShowing;
        });
      });
          
      registry.find('content', function(elem){
        content = elem;
      });
      
      registry.find('background', function(elem){
        background = elem;
      });
      
      scope.$watch('overlayShowing', function(showing){
        var display = showing ? 'block' : 'none';
        if(content) { content.css('display', display) }
        if(background) { background.css('display', display) }
      });
            
    }
  }
});