如何修复或创建angularjs自定义指令daterangepicker？

Question

我正在用angularjs创建一个自定义指令，但是我不知道如何将ng模型传递给我的控制器。

我已经尝试包括ngModel和ngModelCtrl，但是对于我来说似乎不起作用。

这是我的daterangepicker.directive.js

/**
 * 
 * @module CrewLeavePostingApp this is the main app module.
 * @directive clDaterangepicker
 * Use as <cl-daterangepicker></cl-daterangepicker> in html
 * 
 */

(function() {

  'use strict';

  angular
    .module('app')
    .directive('clDaterangepicker', clDaterangepicker);

  clDaterangepicker.$inject = ['$window'];

  function clDaterangepicker($window) {
    var directive = {
      restrict: 'E',
      scope: {
        dateFromFormat: '=dateFromFormat',
        dateFromLabel: '@dateFromLabel',
        dateFromModel: '=dateFromModel',

        dateToFormat: '=dateToFormat',
        dateToLabel: '@dateToLabel',
        dateToModel: '=dateToModel',
      },
      templateUrl: 'assets/js/directives/daterangepicker/daterangepicker.directive.html',
      compile: compile
    };
    return directive;

    /**
     * @var {$dateFrom} input element for startDate in daterangepicker
     * @var {$dateTo} input element for endDate in daterangepicker
     *
     */

    function compile() {
      return {
        post: function(scope, element, attrs) {
          var DATE_FROM_ID = 'clDateFrom';
          var DATE_TO_ID = 'clDateTo';

          var inputsDateFrom = document.querySelectorAll('.cb-daterangepicker__dateFrom-input')
          var inputsDateTo = document.querySelectorAll('.cb-daterangepicker__dateTo-input')

          inputsDateFrom.forEach(function(input, i) {
            input.setAttribute('id', DATE_FROM_ID + i);
            input.setAttribute('name', DATE_FROM_ID + i);
          });

          inputsDateTo.forEach(function(input, i) {
            input.setAttribute('id', DATE_TO_ID + i);
            input.setAttribute('name', DATE_TO_ID + i);
          });

          var labelsDateFrom = document.querySelectorAll('.cb-daterangepicker__dateFrom-label')
          var labelsDateTo = document.querySelectorAll('.cb-daterangepicker__dateTo-label')

          labelsDateFrom.forEach(function(label, i) {
            label.setAttribute('for', DATE_FROM_ID + i);
          });
          labelsDateTo.forEach(function(label, i) {
            label.setAttribute('for', DATE_TO_ID + i);
          });

          var inputsDateFrom = document.querySelectorAll('.cb-daterangepicker__dateFrom-input')
          var inputsDateTo = document.querySelectorAll('.cb-daterangepicker__dateTo-input')

          inputsDateFrom.forEach(function(input, i) {
            _initializeDatepicker(i);
          });

          inputsDateTo.forEach(function(input, i) {
            _initializeDatepicker(i);
          });

          function _initializeDatepicker(i) {
            var $dateFrom = $('#' + DATE_FROM_ID + i),
              $dateTo = $('#' + DATE_TO_ID + i),
              dateFromFormat = scope.dateFromFormat,
              dateToFormat = scope.dateToFormat;

            /**
             * 
             * @function datepicker()
             * Set input into a datepicker
             * @param {format} type must be an object
             * 
             */
            $dateFrom.datepicker(dateFromFormat)
            $dateTo.datepicker(dateToFormat);
            /**
             * 
             * @function {changeDate} callback
             * 
             * @var {minDate} get selected date value of {dateFrom}
             * @var {fromDate} Returns a localized date object representing the internal date object of {dateFrom}
             * @var {toDate} Returns a localized date object representing the internal date object of {dateTo}
             * 
             * Triggers when dateFrom was changed
             * 
             */
            $dateFrom.datepicker()
              .on('changeDate', function(selected) {
                var minDate = new Date(selected.date.valueOf());
                var fromDate = $dateFrom.datepicker('getDate');
                var toDate = $dateTo.datepicker('getDate');

                $dateTo.datepicker('setStartDate', minDate);
                if (fromDate > toDate) {
                  $dateTo.datepicker('setDate', minDate);
                }

                scope.$digest;

              });
          }

        }
      }


    }

  }
})();

这是我的daterangepicker.directive.html

<div class="cb-daterangepicker">
  <div class="cb-daterangepicker__dateFrom form-group col-xs-12 col-sm-6">
    <label class="cb-daterangepicker__dateFrom-label control-label">{{dateFromLabel}}</label>
    <div class="input-group">
      <input type="text" class="cb-daterangepicker__dateFrom-input form-control" placeholder="" />
      <span class="cb-daterangepicker__icon input-group-addon"><i class="glyphicon glyphicon-calendar"></i></span>
    </div>
  </div>

  <div class="cb-daterangepicker__dateTo form-group col-xs-12 col-sm-6">
    <label class="cb-daterangepicker__dateTo-label control-label">{{dateToLabel}}</label>
    <div class="input-group">
      <input type="text" class="cb-daterangepicker__dateTo-input form-control" placeholder="" />
      <span class="cb-daterangepicker__icon input-group-addon"><i class="glyphicon glyphicon-calendar"></i></span>
    </div>
  </div>
</div>

这应该如何实现

<cl-daterangepicker date-from-format="detailed.dateFromFormat"
                    date-to-format="detailed.dateToFormat"
                    date-from-label="Leave Date From"
                    date-from-model="detailed.crew.leaveDateFrom"
                    date-to-label="Leave Date To"
                    date-to-model="detailed.crew.leaveDateTo">
</cl-daterangepicker>

我的页面控制器中有

vm.crew = {leaveDateFrom: '', leaveDateTo: ''}
vm.dateFromFormat= {
      format: 'mm/dd/yyyy',
      autoclose: true
}
vm.dateToFormat= {
      format: 'mm/dd/yyyy',
      autoclose: true
}

我使用引导日期选择器（https://github.com/uxsolutions/bootstrap-datepicker）

我希望我的自定义指令的ngmodel可以在页面控制器中访问， 我也希望我的指令可以重用