title: Passing scope through an angularjs directive
body: <p>I want to create a reusable directive that passes the parent scope through the directive to it's child scope.</p>
  
  <p>For example, I want to dynamically set the height of a container so that it can be scrollable. The problem is that any of the items that I want to be repeated (in this case the log) I must pass in to the scrollable directive since once I add it anything contained within is in the scrollable scope.</p>
  
  <p>The problem comes in when I want to reuse the scrollable directive on a container that doesn't have a need for the log parameter (or needs many types of logs). Is there a way to have the inner ngRepeat reach outside of the directive scope? Or have the directive map the parent's scope on to it's own?</p>
  
  <p>My HTML follows. Note that I must pass in the 'service.log' so that the ngRepeat knows what to iterate over.</p>
  
  <pre><code>&lt;div ng-controller="LogCtrl" class="span3"&gt;
    &lt;div scrollable log="service.log" selector="#stats-content" class="well"&gt;
      &lt;h4&gt;Log&lt;/h4&gt;
      &lt;dl ng-repeat="item in log"&gt;
        &lt;dt&gt;{{item.key}}&lt;/dt&gt;
        &lt;dd&gt;{{item.value}}&lt;/dd&gt;
      &lt;/dl&gt;
    &lt;/div&gt; &lt;!-- well --&gt;
  </code></pre>
  
  <p>My controller is pretty simple:</p>
  
  <pre><code>.controller('LogCtrl', function($scope, log_service) {
    $scope.service = log_service;
  });
  </code></pre>
  
  <p>The scrollable directive:</p>
  
  <pre><code>.directive('scrollable', function(current) {
    return {
      restrict: 'A',
      scope: {
        selector: '@',
        log: '='
      },
      link: function(scope, elem, attrs, ctrl) {
        var height = $(attrs.selector).height();
        elem.height(height - 300 + 'px');
      }
    };
  });
  </code></pre>