Angular Direktive von Array-Element in ngRepeat

Ich arbeite an einem Projekt, das eine beliebige Anzahl von HTML-Karten haben wird, und das Format und die Positionierung der Karten ist gleich, aber der Inhalt von ihnen wird unterschiedlich sein.Angular Direktive von Array-Element in ngRepeat

Mein Plan war, den Inhalt jeder Karte als eine eckige Richtlinie zu implementieren, und dann mit ngRepeat, durchlaufen Sie meine Array von Anweisungen, die in beliebiger Reihenfolge sein können, jede Anweisung in einer Karte anzuzeigen. Es wäre so etwas wie dieses:

in meinem Controller:

$scope.cards = [ 
    'directice-one', 
    'directive-two', 
    //etc.. 
]

meine Richtlinie:

.directive('directiveOne', function() { 
    return { 
     restrict: "C", 
     template: '<h1>One!!</h1>' 
    }; 
}) 

.directive('directiveTwo', function() { 
    return { 
     restrict: "C", 
     template: '<h1>Two!!</h1>' 
    }; 
}) 

//etc..

mein html:

<div class="card" ng-repeat="item in cards"> 
    <div class="{{item}}"></div> 
</div>

Aber .. die Richtlinien nicht machen. Also bekomme ich einfach ein div mit class="directive-one".

Dies könnte ein Konstruktionsfehler meinerseits, eine Art Syntaxfehler oder nur eine Einschränkung der eckigen sein. Ich bin mir nicht sicher.

Ich habe auch eine Richtlinie <card> betrachtet zu machen, und dann das Bestehen die templateUrl: hinein, aber das würde dazu führen, mir den Zugang zu $scope und den javsacript Fähigkeiten zu verlieren, die ich hätte, wenn jede Karte war eine eigene Richtlinie ist.

Also, beraten, Code Hilfe, alles wäre sehr hilfreich!

Quelle

2016-04-19 delashum

Alberne Frage, aber warum nicht einfach ein Array von Objekten anstelle von einem Array von Anweisungen übergeben? Wie zum Beispiel [{foo: "bar", ...}] und dann können Sie natürlich auf das Objekt aus Ihrer Vorlage zugreifen, indem Sie item.foo etc ... – user1027620

@delashum, Sie müssen verstehen, dass Angular nicht die ersetzen wird Elemente mit Style-Klassen mit den Direktiven, denen sie entsprechen, wenn Sie es nicht explizit angeben (zB über '$ compile'). Hier ist eine einfache Demonstration dessen, worüber ich rede - http://plnkr.co/edit/qf677nqrPhhW0ajSkVy5?p = Vorschau Trotzdem empfehle ich dir, dein Design zu überprüfen. – miqid

@miqid Danke für die Hilfe! Ich wusste nicht über '$ compile', aber es funktionierte hervorragend! Ich stimme zu, das ist nicht die beste Einrichtung, aber ich bin mir nicht sicher, was ist. Ich denke, ich habe noch nicht die Erfahrung, um sicher zu sein. Irgendwelche einfachen Vorschläge für diese Art von Projekt? – delashum

Ich wähle Direktiven nur, wenn ich sie in HTML-Markup verwenden muss. Angenommen, das Kartenlayout ist gleich und es werden unterschiedliche Informationen basierend auf den Benutzereinstellungen benötigt.

HTML Datei

<my-card Name="First" Option="Myoptions"></Card> 
<my-card Name="Second" Option="GenOptions"></Card>

Richtlinie

angular.module("testapp").directive("MyCard", function() { 
scope: { 
name: '@', 
Option: '@' 
Controller: "myCardController", 
templateURL: "~/myCard/myCardTemplate.html" 
} 
});

In Template Sie die Informationen implementieren können von HTML-Seite über die Richtlinie verabschiedet.

Hoffe, das hilft.

Beachten Sie, dass der obige Ansatz bevorzugt wird, wenn Sie ein Framework-Art von Dingen entwickeln. Zum Beispiel entwickeln Sie ein Web-Framework und der Header enthält 5 Parameter und diese 5 Parameter müssen über Markup übergeben werden. Das Wichtigste ist, dass das Framework/Header unabhängig ist

Quelle

2016-04-20 01:04:17

In Ihrer Steuerung müssen Sie die Direktivenmodule benötigen. Weisen Sie sie dann einer Bereichsvariablen zu, die das Array haben würde, das Sie haben. Wird mit Code aktualisiert, wenn ich auf den Desktop komme, versucht mit Telefon irgendwie Tuff zu tun.

Quelle

2016-04-19 23:59:42 alphapilgrim

Angular Direktive von Array-Element in ngRepeat

Antwort

Verwandte Themen