Как подключить функцию от контроллера к директиве

0

У меня есть функция, которую мне нужно запустить по специальной директиве. Я не могу заставить функцию перейти к директиве с областью выделения.

Вот моя функция, которую я хочу передать:

    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
  • 0
    Почему $scope.isGreaterThanStartDate = isGreaterThanStartDate затем использовать это в представлении? Не уверен, что ваша проблема ...
Теги:

2 ответа

1

Если функция isGreaterThanStartDate не имеет слишком большой зависимости в контроллере, я думаю, что лучше разместить ее внутри service которая используется для обмена функциями между разными местами.

0

Вам нужно указать директиву функцию в вашем исходном HTML.

<div mtz-date-picker name="endDate"
  ng-model="data.program.endDate"
  blur="isGreaterThanStartDate()"
  min-date="data.program.startDate"
  is-greater-than-start-date="isGreaterThanStartDate()"
  >
  <!--readonly="data.readonly">-->
</div>

Затем в вашей директиве он прошел через ваш объем.

scope: {
        isGreaterThanStartDate: '&',
        fixPosition: '=',
        name: '@',
        minDate: '=',
        mode: '@',
        blur: '&',
        ngChange: '&',
        ngModel: '=',
        placeholder: '@',
        readonly: '=',
        required: '='
      },

Ещё вопросы

Сообщество Overcoder
Наверх
Меню