Блог

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

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

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

Я предполагаю, что проблема как-то связана с ng-model , его базовым ngModelController и $viewValue тем, что находится там, но я не уверен, как заставить это позволить мне закончить ввод.

Демонстрационную версию Plunker можно найти здесь

РАБОТАЕТ: uib-заголовок типа

 <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" />