angularjs - 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"/>

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

Official Documentation在装饰器上。

A service decorator intercepts the creation of a service, allowing it to override or modify the behaviour of the service. The object returned by the decorator may be the original service, or a new service object which replaces or wraps and delegates to the original service.

更新

从 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">