Угловой шрифт, установка пользовательского шаблона всплывающего окна

можно ли установить собственный шаблон для всплывающего окна typeahead?

директива 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"/>

angularjs angular-ui-typeahead
person desmati    schedule 12.07.2015    source источник
comment
Есть ли прогресс в этом? Я в той же лодке.   -  person Brian Wigginton    schedule 17.07.2015
comment
@desmati - проверьте следующую ссылку   -  person Gaurav Vachhani    schedule 18.07.2015
comment
Не могли бы вы указать, какую библиотеку typeahead вы используете? Их великое множество.   -  person Sulthan    schedule 18.07.2015

Ответы (1)


arrow_upward
5
arrow_downward

Вы можете использовать декораторы AngularJS, которые позволяют вам изменять директивы (также сервисы и почти что угодно) во время их создания.

Это версия AngularJS для исправления обезьян. В будущем, если вы захотите изменить другие директивы, используйте следующий шаблон при использовании метода .decorator.

[nameOfDirective]Directive e.g: 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. Вы должны получить ошибку 404, пока директива пытается получить новый URL-адрес шаблона.

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">
person Ricardo Velhote    schedule 18.07.2015
comment
не могли бы вы добавить ссылку на официальную документацию? @Рикардо Велхоте - person desmati; 18.07.2015
comment
@desmati Конечно. Я отредактировал исходное сообщение с этой информацией :) - person Ricardo Velhote; 18.07.2015
comment
благодарю вас. можно ли изменить директиву внутри контроллера? дело в том, чтобы иметь собственный шаблон для каждого представления. - person desmati; 18.07.2015
comment
@desmati Вам придется переопределить функцию link, которая также доступна в декораторе. Переопределяя функцию link, вы можете сделать выбор шаблона более настраиваемым, потому что тогда вы сможете указать пользовательские атрибуты в элементе HTML и даже получить доступ к области, в которой используется эта директива. - person Ricardo Velhote; 18.07.2015