Zugriffssteuerungsbereich von Bootstrap-UI typeahead Vorlage

vermag ich nicht aus dem Inneren einer benutzerdefinierten Vorlage einen Controller-Funktion aufrufen mit ui-typeahead:Zugriffssteuerungsbereich von Bootstrap-UI typeahead Vorlage

<input typeahead="val for val in autoComplete($viewValue)" 
    typeahead-template-url="searchAutocompleteTpl.html" 
    ng-model="query"/> 

<script type="text/ng-template" id="searchAutocompleteTpl.html"> 
    <span ng-repeat="eqp in match.model.equipment"/> 
    <a href="" ng-click="showItem(eqp.model)"> 
     found in: {{eqp.model}} 
    </a> 
</script>

Das Problem ist, dass der Anwendungsbereich der Controller nicht vorhanden sein scheint die Vorlage:

showItem(eqp.model)

nie aufgerufen. Ich habe auch versucht, mit:

$parent.showItem(eqp.model)

ohne Erfolg.

Wie kann ich dann eine Funktion/Wert auf dem Bereich der Steuerung aufrufen?

Quelle

2013-08-26 recalcitrant

Ich stieß auf das gleiche Problem und schaute auf die typeahead code on github, um zu sehen, ob das irgendwelche Hinweise bieten könnte. Es scheint, dass mehrere Richtlinien an der Erstellung der Vorschlagsliste beteiligt sind und jeder einen eigenen untergeordneten Gültigkeitsbereich erhält.

Mit anderen Worten, Ihre $parent.showItem(eqp.model) war ein guter Versuch, aber Sie haben nicht genug Ebenen gehen. Was für mich gearbeitet wurde: $parent.$parent.$parent.showItem(eqp.model)

Quelle

2013-10-09 11:01:39

danke, aber weißt du warum? und wo können wir klar über die Struktur des Geltungsbereichs sehen? – Awakening

Es dauerte 4 $ Elternteil für mich, um zum ursprünglichen Umfang zu gelangen. – ddalex

Es hängt davon ab, wie und wo Sie es verwenden. typeahead führt eindeutig einen isolierten Bereich ein, was bedeutet, dass Sie nicht prototypisch von Ihren eigenen Elternbereichen erben können. Deshalb müssen Sie $ parent verwenden, das selbst in isolierten Bereichen mit eckigen Werten versehen ist. Wenn Sie typeahead in Ihrer eigenen Direktive verwenden, die auch einen isolierten Bereich definiert, müssen Sie die $ parent-Kette viermal nach oben gehen, um zu Ihrem Basisbereich zu gelangen. Natürlich möchten Sie an dieser Stelle vielleicht beginnen, Ihren Code zu überdenken. Der Punkt eines isolierten Bereichs ist, dass er wiederverwendet werden kann, da er nicht von einem übergeordneten Element abhängt. –

Die Lösung des Problems ist ein Objekt in Ihrer Vorlage Steuerungsbereich so zu initiieren:

$scope.typeaheadObject = { 
    query : '', 
}

jetzt in dem Formular müssen Sie Ihr ng-Modell ändern mit :

ng-model="typeaheadObject.query'

Dies das Objekt typeaheadObject in allen Controller erstellen, wenn Sie es in einem Ihrem Controller nicht erneut starten. Also, wenn Sie auf den Inhalt des Objekts in einem dieser Controller zugreifen wollen, müssen Sie nur zum Beispiel zu tun haben:

console.log($scope.typeaheadObject.query)

Dies ist ein klassisches Problem in AngularJS. Sie können nur auf einen übergeordneten Bereich zugreifen und ihn ändern, wenn die Variable ein Bestand in einem Objekt ist.

Schließlich müssen Sie ein '.' in deinem ng-Modell. Dadurch können Ihr ui-Bootstrap-Modul und Ihr eigenes Modul ihren Bereich mit dem Objekt teilen.

Ich habe gerade ein Beispiel auf Plunker gemacht, um sicher zu sein, dass Sie das Problem gut verstehen.

http://plnkr.co/edit/4YWNMagm571Gk2DrCERX?p=preview

einen guten Tag :)

Quelle

2015-07-30 15:25:33 stephanec

Ich habe auch gleiches Problem. Ich bin mir nicht sicher, aber es funktioniert.

Sie können doppelte $parent anstatt einzelner verwenden.

z.B. $parent.$parent.showItem(eqp.model)

Quelle

2016-07-14 06:22:37

Es funktionierte für mich nach dem Hinzufügen von 4 Eltern. $ parent. $ Parent. $ Parent. $ Parent.