在单独的指令中封装角度类型Ahead

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));

不幸的是，这种方法没有奏效。

有人能告诉我我做错了什么吗？

Answer 1

只需将数据移动到包装控制器并移除隔离的作用域。

Plunker

Plunker2