title: Creating Angular.js directives containing other directives
body: <p>I am trying to come up with a library of re-usable directives. First two directives I tried to implement are DatePicker and DateRangePicker. The DateRangePicker must contain two DatePickers. </p>
  
  <p>I want DatePicker to have a signature similar to:</p>
  
  <pre><code>&lt;div cx-date-picker="" cx-label="myLabel" 
       cx-id="myDate" cx-source="myDateVarInScope"&gt;&lt;/div&gt;
  </code></pre>
  
  <p>and I want DateRangePicker to look like this:</p>
  
  <pre><code>&lt;div cx-date-range-picker cx-id="searchRangePicker" 
       cx-source="myDateRangeInScope"&gt;&lt;/div&gt;
  </code></pre>
  
  <p>where myDateRangeInScope contains members: startDate and endDate</p>
  
  <p>I looked at a few examples of how to create directives but I can't figure out how to pass parameters into underlying directives. Here is the code for DatePicker </p>
  
  <pre><code>angular.module('ng').directive('cxDatePicker', function () {
        return {
          restrict: 'A',
          scope: 'isolate',
          template: '&lt;div class="control-group input-append"&gt;' +
          '&lt;label for="{{theId}}" class="label"&gt;{{theLabel}}&lt;/label&gt;' +
          '&lt;input id="{{theId}}" class="input-small" type="text" ' + 
          'ng-model="theSource" data-date-format="dd/mm/yyyy" bs-datepicker&gt;' +
          '&lt;button type="button" class="btn" data-toggle="datepicker"&gt;' +
          '&lt;i class="icon-calendar"&gt;&lt;/i&gt;&lt;/button&gt;' +
          '&lt;/div&gt;',
  
          link: function (scope, iterStartElement, attr) {
            var theId = attr['cxId'];
            scope.theLabel = attr['cxLabel']
            scope.theId = attr['cxId'];
            scope.theSource = attr['cxSource'];
          }
        };
      });
  </code></pre>
  
  <p>which displays proper values for <em>theId</em> and <em>theLabel</em> but doesn't display correct date. </p>
  
  <p>And this is the code for DateRangePicker, which fails to set attributes for underlying DatePickers. </p>
  
  <pre><code>angular.module('ng').directive('cxDateRangePicker', function () {
        return {
          restrict: 'A',
          scope: 'isolate',
          template: '&lt;div cx-date-picker="" cx-source="{{startSource}}" ' +
            'cx-label="{{fromLabel}}" cx-id="{{startId}}"&gt;&lt;/div&gt;' +
            '&lt;div cx-date-picker="" cx-source="{{endSource}}" cx-label="{{toLabel}}" ' +
            ' cx-id="{{endId}}"&gt;&lt;/div&gt;',
          link: function (scope, iterStartElement, attr) {
            var theId = attr['cxId'];
            scope.startId = theId + "From";
            scope.endId = theId + "To";
            scope.fromLabel = "From";
            scope.toLabel = "To";
            scope.startSource = attr['cxSource'] + ".startDate";
            scope.endSource = attr['cxSource'] + ".endDate";
  
          }
        };
      });
  </code></pre>
  
  <p>Can anyone point me to a solution? I saw that link() methods of underlying DatePickers are called before link() method of DateRangePicker. Therefore no wonder the values are not passed. But I lack overall conceptual understanding to solve the problem. Official docs didn't help much.</p>
  
  <p>In general, did anyone try to achieve a similar goal - to build directives on top of other directives and by doing it, build a business domain-specific component library?</p>