Chips Autocomplete für Angular 1.6. Kein Winkelmaterial

Question

Ich würde eine Autocomplete-Chipkomponente in unserer Angular 1.6 Anwendung hinzufügen müssen. Wir verwenden Typescript, Webpack 2. Da wir bereits angular-ui-bootstrap verwenden, wollen wir auch kein eckiges Material einführen, um Stilkonflikte zu vermeiden. Das gewünschte Ergebnis ist jedoch genau das, was Materialchips bieten.

Gibt es eine Richtlinie oder Komponente, die ich in meinem Fall verwenden kann? Ich habe this library gefunden, aber es laufen endlose Ausnahmen, wenn ich es importiere.

Leider konnte ich nur Teillösungen mit Bootstrap-Typ finden, aber dann müsste ich alle "Chips" Teil implementieren, so dass ich denke, das Rad neu zu erfinden.

Answer 1

Stack Newb hier. Ich habe ein identisches Problem wie Ihres. Hier ist, wie ich dieses Problem gelöst:

1. Resolve der ReferenceError: error is not defined innerhalb der Winkel-Chips Bibliothek

Die Bibliothek, die Sie verwenden (Winkel-Chips) nicht mit Typoskript im Auge behalten. Sie müssen also zunächst den folgenden Fehler beheben: ReferenceError: error is not defined, indem Sie ihn in der Zeile oben mit var error; definieren. Dies sollte eckige Chips für Ihre Webpack-Nutzung vorbereiten.

Das zweite Problem, das Sie finden, ist, wie Sie Ihre typeahead-template-url mit Webpack in den Mix hinzufügen. Verwenden Sie statt einer separaten HTML-Datei eine Inline-Vorlage, auf die hier verwiesen wird: Bootstrap-UI Typeahead display more than one property in results list?.

Wenn Sie wie ich faul und wollen nicht, dass die Hyper-Link zu folgen, dies als Beispiel:

2. Vorlage vor dem <chips> Tag hinzugefügt werden:

<script type="text/ng-template" id="yourTemplate.html"> 
    <a tabindex="-1"> 
     <i ng-class="'icon-'+match.model.type"></i> 
     <span ng-bind-html-unsafe="match.model.title | typeaheadHighlight:query"></span> 
    </a> 
</scrip> 

3. Fügen Vorlage in Ihrer Richtlinie:

typeahead-template-url:"yourTemplate.html" 

Arbeitete wie Ein Charme für mich.