我希望DatePicker有一个类似于的签名：

<div cx-date-picker="" cx-label="myLabel" 
     cx-id="myDate" cx-source="myDateVarInScope"></div>

我希望DateRangePicker看起来像这样：

<div cx-date-range-picker cx-id="searchRangePicker" 
     cx-source="myDateRangeInScope"></div>

其中myDateRangeInScope包含成员：​​startDate和endDate

我查看了一些如何创建指令的示例,但我无法弄清楚如何将参数传递给基础指令.这是DatePicker的代码

angular.module('ng').directive('cxDatePicker',function () {
      return {
        restrict: 'A',scope: 'isolate',template: '<div class="control-group input-append">' +
        '<label for="{{theId}}" class="label">{{theLabel}}</label>' +
        '<input id="{{theId}}" class="input-small" type="text" ' + 
        'ng-model="theSource" data-date-format="dd/mm/yyyy" bs-datepicker>' +
        '<button type="button" class="btn" data-toggle="datepicker">' +
        '<i class="icon-calendar"></i></button>' +
        '</div>',link: function (scope,iterStartElement,attr) {
          var theId = attr['cxId'];
          scope.theLabel = attr['cxLabel']
          scope.theId = attr['cxId'];
          scope.theSource = attr['cxSource'];
        }
      };
    });

它显示了Id和theLabel的正确值,但没有显示正确的日期.

这是DateRangePicker的代码,它无法为基础DatePickers设置属性.

angular.module('ng').directive('cxDateRangePicker',template: '<div cx-date-picker="" cx-source="{{startSource}}" ' +
          'cx-label="{{fromLabel}}" cx-id="{{startId}}"></div>' +
          '<div cx-date-picker="" cx-source="{{endSource}}" cx-label="{{toLabel}}" ' +
          ' cx-id="{{endId}}"></div>',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";

        }
      };
    });

有谁能指出我的解决方案？我看到在DateRangePicker的link()方法之前调用了基础DatePickers的link()方法.因此难怪这些价值观没有通过.但我缺乏解决问题的整体概念理解.官方文档没有多大帮助.

一般来说,有没有人试图实现类似的目标 – 在其他指令之上构建指令,并通过这样做,构建一个特定于业务领域的组件库？