Binden eines Arrays an eine direktive Variable in AngularJS

Ich versuche ein array in eine Vorlage, so kann ich mit den Personen Werte davon. Mein problem ist, dass das Attribut verwandelt sich in einen string einmal in meinem template so ist es nicht mehr zugänglich, {{var[0]}} und wird stattdessen zurückgeben der ersten Zeichen von "string" in der Regel "["

Hier ist ein Vereinfachtes setup der Daten:

"varForward": ["100", "1"],
"varBack": ["1", "100"]

Hier ist eine vereinfachte Teil der HTML-Datei, die Interaktion mit diesen Daten:

<my-customer-vars value="{{varForward}}">
    </address-numbers>
<my-customer-vars value="{{varBack}}">
    </address-numbers>

und schließlich, hier ist ein Teil SOLL, ersetzen Sie das benutzerdefinierte tag mit meinen eigenen Sachen:

directive('myCustomerVars', function($compile) {
    return {
        restrict: 'E',
        scope: {
            value: "@"
        },
        template:
        '<div>'+
          '<p class="body-text">Some stuff goes here</p>'+
          '<input type="text" name="firstinput" value="{{value[0]}}"> - '+
          '<input type="text" name="secondinput" value="{{value[1]}}">'+
        '</div>',
        replace: true
    }
});

Also hier bin ich, wenn ich versuche mit dem Wert[0] bekomme ich [ Wenn ich versuche Wert zu erhalten[1] habe ich bekommen " und so weiter. Gibt es irgendwelche Hilfe bei der Nutzung von arrays innerhalb der Vorlage einer Richtlinie?

InformationsquelleAutor der Frage Organiccat | 2013-02-04

Müssen Sie zum ändern der "@" in "=" und übergeben Sie das array ohne die {{ }}

wie diese:

<my-customer-vars value="varForward">
    </my-customer-vars>
<my-customer-vars value="varBack">
    </my-customer-vars>

Richtlinie:

directive('myCustomerVars', function($compile) {
    return {
        restrict: 'E',
        scope: {
            value: "="
        },
        template:
        '<div>'+
          '<p class="body-text">Some stuff goes here</p>'+
          '<input type="text" name="firstinput" value="{{value[0]}}"> - '+
          '<input type="text" name="secondinput" value="{{value[1]}}">'+
        '</div>',
        replace: true
    }
});

Dies ist passiert, weil jeder Ausdruck innerhalb einer directuve Attribut definiert durch ein @ wird ausgewertet, als nur als Zeichenfolge und in der anderen Art und Weise wird es bewertet als verbindlichen Ausdruck. (mit 2-Wege-Bindung, also vorsichtig sein).

InformationsquelleAutor der Antwort Shai Reznik - HiRez.io

Wenn Sie lieber nicht anlegen isolieren Anwendungsbereich der Richtlinie (z.B. beim erstellen von benutzerdefinierten Validierung-Richtlinien), könnte man das array übergeben:

<my-customer-vars model="varForward">

Und Lesen Sie dann den Wert in die verbindende Funktion der Richtlinie als:

directive('myCustomerVars', function($compile) {
    return {
        restrict: 'E',
        link: function (scope, elm, attrs, ctrl) {
            var myVars = scope[attrs.model]; //<--- took a time to figure out
            console.log(myVars);
        }
    }
});

InformationsquelleAutor der Antwort Danita

6

Nur um die Antwort von Danita, müssen Sie $eval Holen Gültigkeitsbereich von Variablen:

Nur ändern
```
var myVars = scope[attrs.model]; 
```
zu
```
var myVars = scope.$eval(attrs.model); 
```
InformationsquelleAutor der Antwort Sohan Soni
0

Nur eine andere Perspektive - wenn das problem nur verwaltet ein array von strings in eckigen Anwendung würde ich die Verwendung einer der folgenden (oder einer ähnlichen):
Es sei denn, Sie üben die Erstellung Ihrer eigenen angular-Direktiven (dann ignorieren Sie einfach meine Antwort)

InformationsquelleAutor der Antwort Alexander

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.