javascript - 如何将函数从 Controller 连接到指令

Question

我有一个需要在自定义指令上运行的函数。我无法让函数传递到具有隔离范围的指令。

这是我想要传递的函数:

    function isGreaterThanStartDate() {
      console.log('function run');
    }

这是指令:

    am.directive('mtzDatePicker', [
      () => {
        return {
          replace: true,
          restrict: 'AE',
          templateUrl: 'feature/share/directives/datepicker.html',
          scope: {
            fixPosition: '=',
            name: '@',
            minDate: '=',
            mode: '@',
            blur: '&',
            ngChange: '&',
            ngModel: '=',
            placeholder: '@',
            readonly: '=',
            required: '='
          },
          link(scope) {
            scope.showWeeks = false;

            // Fix the model.
    const model = scope.ngModel;
    if (model instanceof Date) {
      model.setHours(0);
      model.setMinutes(0);
      model.setSeconds(0);
      model.setMilliseconds(0);
    }

    scope.changed = () => scope.ngChange();

    scope.popupOpen = false;

    scope.openDatePicker = event => {
      // Hide all the date pickers, in case any were already visible.
      $('.date-picker > .dropdown-menu').hide();

      // Prevent the click event that trigger this from bubbling.
      event.preventDefault();
      event.stopPropagation();

      scope.popupOpen = true;
    };
  }
};

和 html:

    <div class="form-group">
    <label for="program-end-date" class="control-label">
      {{::'Promotion End Date' | L10n}}
    </label>
    <div mtz-date-picker name="endDate"
      ng-model="data.program.endDate"
      blur="isGreaterThanStartDate()"
      min-date="data.program.startDate">
      <!--readonly="data.readonly">-->
    </div>
    <div class="small">
      {{::'program-end-date-meaning' | L10n}}
    </div>
  </div

最后是该指令的 html:

    <div class="form-group">
    <label for="program-end-date" class="control-label">
      {{::'Promotion End Date' | L10n}}
    </label>
    <div mtz-date-picker name="endDate"
      ng-model="data.program.endDate"
      blur="isGreaterThanStartDate()"
      min-date="data.program.startDate">
      <!--readonly="data.readonly">-->
    </div>
    <div class="small">
      {{::'program-end-date-meaning' | L10n}}
    </div>
  </div

Answer 1

如果函数isGreaterThanStartDate在 Controller 中没有太多的依赖性，我认为最好将其放入service中，该服务用于在不同的服务器之间共享函数地点。