Начальная загрузка AngularUI в пользовательской директиве - PullRequest
Новая
       11

Начальная загрузка AngularUI в пользовательской директиве

1 голос
/ 06 марта 2019

Я успешно использовал директиву typeahead UI Bootstrap на своих страницах AngularJS, и я хотел бы создать пользовательскую директиву для выбора учетной записи, которая объединяет typeahead с некоторыми службами для извлечения параметров учетной записи.

Опции отображаются просто отлично, но я думаю, что у меня возникают проблемы с ng-model, передаваемым как переменная $ scope из внешнего контейнера в пользовательскую директиву - это обрезает меня, когда я пытаюсь на самом деле набрать из выбора в пользовательской директиве.

При использовании uib-typeahead в моем внешнем контроллере он работает просто отлично и всегда ждет, когда вы закончите печатать / делать свой выбор. Но когда это делается в директиве, ng-model-options: { debounce: 50 }, по-видимому, приводит к тому, что набор текста пользователя сбрасывается до пустого после интервала отладки. Через 50 мс я могу получить только один или два символа, а затем $ viewValue (?) Сбрасывается, и это часто искажает как возможный выбор, так и заполнитель в текстовом поле. Если я установлю для debounce более высокое значение, то перед его сбросом у меня будет больше времени, но при этом гораздо медленнее будет реагировать на ввод пользователя.

Полагаю, что проблема как-то связана с ng-model, лежащим в его основе ngModelController и $viewValue, но я не уверен, как заставить его закончить печатать.

Демо Plunker можно найти здесь

The Typeahead row works fine - the custom directive that *includes* the typeahead has the issue

РАБОТАЕТ: uib-typeahead 

<input type="text"
       name="account2"
       uib-typeahead="account as formatAccount(account) for account in accounts | filter:$viewValue"
       placeholder="Select an account"
       ng-model="selectedAccount"
       ng-model-options="{ debounce: 50 }"
       typeahead-show-hint="true"
       typeahead-focus-first="true"
       typeahead-editable="false"
       typeahead-min-length="0"
       class="form-control account-search"
       autocomplete="off" />

НЕ РАБОТАЕТ: ссылка на директиву 

<input type="text"
       name="account3"
       input-account
       accounts="accounts"
       placeholder="Select your account"
       ng-model="selectedAccount" />

нетерпеливая директива 

app.directive('inputAccount', [

  function() {

    let directive = 
      {
        restrict: 'A',
        replace: 'true',
        require: ['ngModel'],
        templateUrl: 'input-account.html',
        scope: {
          ngModel: '=ngModel',
          accounts: '=',
          placeholder: '@',
          name: '@',
          required: '@'
        },
        link: linkFunction
      };

    return directive;

    function linkFunction($scope) {

      $scope.formatAccount = function (account) {

          if (account) {
              return `${account.id} - ${account.name}`;
          }

          return '';

      };  // formatAccount


    }


  }

]);   // inputAccount directive

Шаблон нетерпеливой директивы 

<input type="text"
       name="{{ name }}"
       placeholder="{{ placeholder }}"
       ng-model="ngModel"
       ng-model-options="{ debounce: 50 }"
       uib-typeahead="account as formatAccount(account) for account in accounts | filter:$viewValue"
       typeahead-show-hint="true"
       typeahead-focus-first="true"
       typeahead-editable="false"
       typeahead-min-length="0"
       class="form-control account-search"
       autocomplete="off"
       ng-required="required" />
...