错误：无控制器：Angular Typeahead的ngModel

Question

我混合了Jquery和angular，我试图在里面显示一个带有Typeahead的对话框。 出于客观原因，我会显示一个模态体并使用Angular typeAhead指令附加它。

$('.modal-builder .modal-body').append('<input type="text" placeholder="Start typing product title" typeahead="item.title for item in getAutoCompleteProducts($viewValue)" typeahead-loading="loadingLocations" class="form-control input inline" typeahead-wait-ms="200" typeahead-min-length="0" typeahead-on-select="insertProduct($item)" /><i class="fa fa-spinner fa-spin fa-lg" ng-show="loadingLocations" > </i>');

之后我尝试编译它：

var cr = $('.modal-builder .modal-body').append('<div class="row"></div>');
$compile(cr)(scope);

但是我收到了这个错误：

Error: No controller: ngModel

范围也来自Angular Bootstrap对话指令。在里面我有各种按钮来显示与TypeAhead的对话。

我在Stack上阅读了其他问题，看起来像是指令范围之间的错误。我无法通过单独的范围来解决它。

是否应该在一个全新的范围内编译？

Answer 1

将ngModel指令添加到预先输入模板：

<input type="text" 
       ng-model="product.selected"
       placeholder="Start typing product title" 
       typeahead="item.title for item in getAutoCompleteProducts($viewValue)"
       ...

但是jQuery与Angular的混合并不是一个好主意。