Angular typeahead，设置自定义弹出窗口模板

Question

有没有办法为typeahead-popup设置自定义模板？

"typeahead-template-url"指令仅适用于弹出窗口中的每个匹配项。

这是我的代码：

    <input class="select-location" id="Location" type="text"
 ng-model="model.location" 
 ng-keypress="keypress($event)"
 typeahead="match for match in getLocations($viewValue)"
 typeahead-template-url="matchUrl"/>

- Hossein

---

有进展了吗？我也是一样的情况。 - Brian Wigginton

@desmati - 请查看以下链接。 - Gaurav Vachhani

你能具体说明你使用的是哪个typeahead库吗？有很多种库可供选择。 - Sulthan

Answer 1

你可以使用AngularJS修饰器，在指令（也包括服务和几乎所有东西）实例化时修改它们。

它们是AngularJS版本的猴子补丁。将来，如果您想修改其他指令，使用.decorator方法时模式如下：

[nameOfDirective]Directive，例如：typeaheadPopupDirective。

var app = angular.module("monkey", ["ui.bootstrap"]);
app.config(function ($provide) {
    $provide.decorator("typeaheadPopupDirective", function ($delegate) {
        $delegate[0].templateUrl = "template/typeahead/typeahead-popup-ALTERNATIVE.html";
        return $delegate;
    });
});

这是使用原始ui-bootstrap指令的演示。在指令尝试获取新模板URL时，您应该会收到404错误。

http://plnkr.co/edit/0mPADZ7D7Eszp07R2g60?p=preview

---

装饰器的官方文档。

服务装饰器拦截服务的创建，允许其覆盖或修改服务的行为。装饰器返回的对象可以是原始的服务，也可以是替换或包装并委托给原始服务的新服务对象。

更新

自angular bootstrap 0.14.x起，此功能现已受到本地支持。在typeahead指令中，您可以使用typeahead-popup-template-url属性指定用于弹出窗口的模板。

<input type="text" ng-model="selected"
     typeahead="state for state in states | filter:$viewValue
     typeahead-append-to-body="true"
     typeahead-popup-template-url="customPopUp.html"
     class="form-control">

- Ricardo Velhote

---

请您能否添加官方文档的参考链接？@Ricardo Velhote - Hossein

@desmati 当然可以。我已经编辑了原始信息并添加了该信息 :) - Ricardo Velhote

谢谢。在控制器内修改指令是否可能？目的是为每个视图拥有自定义模板。 - Hossein

@desmati，您需要覆盖装饰器中也可用的“link”函数。通过覆盖“link”函数，您可以使模板选择更加可定制，因为您将能够在HTML元素中指定自定义属性，甚至访问使用此指令的作用域。 - Ricardo Velhote