自定义指令

Question

我已经在AngularJS页面上成功使用了UI Bootstrap的typeahead指令，并且我想为帐户选择创建一个自定义指令，该指令将typeahead与一些用于获取帐户选项的服务一起包装起来。

这些选项显示得很好，但是我认为ng-model作为$ scope变量从外部容器传递到custom指令时遇到了问题-当我尝试实际上在自定义指令中键入选择。

在我的外部控制器中使用uib-typeahead时，它工作得很好，并永远等待您完成键入/做出选择。但是，在伪指令中执行此操作时，ng-model-options: { debounce: 50 }似乎导致用户的键入在反跳间隔后重置为空。在50毫秒时，我基本上只能在其中输入一个或两个字符，然后重置$ viewValue（？），它经常使可能的选择和文本框中的占位符混乱。如果将防抖设置为较高的值，那么它会给我更长的时间才能重置，但对用户输入的反应也要慢得多。

我猜测该问题与ng-model，其底层ngModelController和其中的$viewValue有关，但是我不确定如何让它我完成输入。

可以找到here

作品：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" />