Fehler beim Schreiben und Kompilieren von Elementen in der Winkelanweisung

Question

Ich habe ein gemeinsames Steuerelement, das basierend auf dem übergebenen Objekt eine Eingabe generiert. Ich habe gerade Bootstrap-Präfix und Suffix hinzugefügt, die gut funktionieren.

Ich möchte auch eine Suffix-Liste hinzufügen, falls verfügbar. Dies ermöglicht es dem Benutzer, die Einheit der Eingabe zu ändern, d. H. Standing Charge könnte Pence pro Tag ('p/day') bis zu GBP pro Jahr (£/year ') sein. Anstatt 4 optionale Eingänge möchte ich nur das Dropdown auf dem Suffix haben.

Ich finde also heraus, ob es ein Suffix ist:

if (scope.model.iSuffix) { 

und dann, wenn es ein Array

if ($.isArray(scope.model.iSuffix)) { 

dann verspotten ich die Kontrolle und fügen Sie alles, wo es

sein muss

var suffixGrp = $('<div>'); 
suffixGrp.attr("class", "input-group-btn"); 

scope.suffix = scope.model.iSuffix[0]; 

var suffixBtn = $('<button>'); 
suffixBtn.attr("type", "button"); 
suffixBtn.attr("class", "btn btn-secondary dropdown-toggle"); 
suffixBtn.attr("data-toggle", "dropdown"); 
suffixBtn.attr("aria-haspopup", "true"); 
suffixBtn.attr("aria-expanded", "false"); 
suffixBtn.text('{{suffix}}'); 

suffixGrp.append(suffixBtn); 

var suffixOpts = $('<div>'); 
suffixOpts.attr("class", "dropdown-menu dropdown-menu-right") 

var suffixItem = $('<a>'); 
suffixItem.attr("class", "dropdown-item"); 
suffixItem.attr("href", "#"); 
suffixItem.attr("ng-repeat", "suff in model.iSuffix"); 
suffixItem.attr("ng-click", "suffix = suff"); 
suffixItem.text('{{suff}}'); 

suffixOpts.append(suffixItem); 

suffixGrp.append(suffixOpts); 

inputGroup.append(suffixGrp); 

Ok, cool. Ich muss nur kompilieren und es sollte getan werden:

$compile(inputGroup)(scope); 

nun das Suffix erscheint, wo es sein sollte, und die Drop-Down zeigt auf klicken etc, etc

Das einzige Problem ist, dass das Element ng-Click nichts tut. Ich will nur, dass es "scope.suffix" aktualisiert

Es sieht so aus, als ob es den Wert von 'suff' als reinen Text interpoliert hat.

Ich habe versucht, es zu ändern:

<!-- suffixItem.text('{{suff}}'); --> 
suffixItem.html('{{suff}}'); 

aber keine Freude. Fehle ich etwas? vielleicht ist mein 'suffix = suff' das Problem?

Dank Andy

PS: ich die jsfiddle einrichten werde Ihnen zeigen, was ich meine. Wird als Service bereit

EDIT: Hier die jsFiddle ist https://jsfiddle.net/akrd77d3/8/

Bitte beachte, dass ich die ng-Klick-Ereignis auf einen Alarm ändert, die nicht ausgelöst. Ich könnte es nur mit einem jQuery-Event pit, aber sollte ich müssen?

Ta^_^

Answer 1

Dies ist ein Scoping Problem wegen Ihrer ng-repeat. Versuchen Sie dies in Ihrem ursprünglichen Code:

suffixItem.text("{{suff+':'+suffix}}"); 

und klicken Sie dann auf die verschiedenen Elemente; Du wirst sehen, was passiert. Wenn Sie in 'ng-click' die Zuweisung zu 'suffix' vornehmen, wird es Teil des untergeordneten Bereichs der wiederholten Exemplarinstanz (und nicht mehr dasselbe "Suffix", das Teil des Bereichs des übergeordneten Elements ist).

Dies ist ein weiterer Grund, die 'controllerAs'-Syntax zu verwenden; Es verringert die Chance dieser Art von Fallstricken.