Javascript 如何在指令中添加元素？

我有一个输入框，我正试图添加功能。我想编写一个类指令，以便轻松地向任何输入框添加功能。我希望当用户输入“@”时，会弹出一个框，使用uib typeahead显示选项。我想不出一种不使原始文本框消失的方式来显示该框，尽管理想情况下，该框会在用户当前键入的位置弹出

<div class="medium-2">
   <label>Age:</label> 
</div>
<div class="medium-10">
    <input type="text" class="form-control pop-up-variables" name="age" error-message="ageErrorMessage" required>
    </input>
</div>

---

看起来您所需要的只是一个下拉列表，而不是另一个InputUsejQuery来添加select。您可以使用

$element

查找指令的DOM元素。无需第二次输入，将

uib typeahead

放在第一个字段上，当输入字段中没有

@

时，将数字列表设为空。

<input class="variable-dropdown" type="text" uib-typeahead="number as number for number in numbers | filter:$viewValue" ng-model="selectedAttribute" placeholder="Choose variable"> 
</input>

  app.directive('popUpVariables', function() {

  return {
    restrict: 'C',
    controller: function($scope) {
        $scope.numbers = ['One', 'Two', 'Three', 'Four', 'Five'];
    },
    link: function (scope, element, attrs, ngModelCtrl) {
        element.on('keypress', function(event) {
            if (event.which === 64) {
                // This is where I want to show the second input
            }
        });
      }
   }
})