将 angular typeAhead 包装在单独的指令中 [英] Wrapping angular typeAhead in separate directive

问题描述

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

My goal was to wrap angular-ui typeAhead directive into easily re-usable component, that could be used like this:

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

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

I've achieve this by writing my custom directive, and specifying static template for typeahead. Here is Plunker

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

Now, I would like to build this template dynamically, and then compile it:

  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.

Unfortunately this approach didn't work Plunker.

谁能告诉我我做错了什么?

Could anyone tell me what I'm doing wrong?

推荐答案

只需将您的数据移动到包装控制器并移除您的隔离范围.

Just move your data to the wrapping controller and remove your isolated scope.

Plunker

Plunker2

这篇关于将 angular typeAhead 包装在单独的指令中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！