在单独的指令中包装angular typeAhead

Question

我的目标是将angular-ui typeAhead指令包装成易于重复使用的组件，可以像这样使用：

<input my-person-lookup="myModel.personId" ></input>

我通过编写自定义指令并为typeahead指定静态模板来实现此目的。这是Plunker

现在，我想动态构建这个模板，然后编译它：

  var html = '<input type="text" ng-model="directiveModel.selectedPerson" typeahead=" p as p.name for p in people" typeahead-min-length="1" typeahead-wait-ms="200" typeahead-editable="false" placeholder="type p"></input>';
  element.replaceWith($compile(html)(scope));

不幸的是，这种方法不起作用Plunker。

有谁能告诉我我做错了什么？

Answer 1

只需将数据移至包装控制器并移除隔离范围即可。

Plunker

Plunker2