Best Practices: Sollte ich ng-switch dafür verwenden?

Question

Ich habe dieses Objekt in Angular.

$scope.columns = { 
    workspace: { 
     title: "Workspace", 
     type: "workspace", 
     activities: [] 
    }, 
    alerts: { 
     title: "Alerts", 
     type: "alert", 
     activities: [] 
    }, 
    main: { 
     title: "Main Feed", 
     type: "main", 
     activities: [] 
    } 
}; 

Und in meinem HTML muss ich durch sie in einer Schleife dynamisch eine Reihe von Spalten in meiner app erstellen (so etwas wie Trello denken)

Jeder type ein Verweis auf eine benutzerdefinierte Richtlinie ist.

Ich versuche herauszufinden, die beste Möglichkeit, meine Direktiven zu platzieren.

Basierend auf diesen Daten ist der unten stehende Code eine geeignete Möglichkeit, diese dynamisch zu erstellen?

<div ng-repeat="(key, obj) in columns"> 

    <div ng-switch on="obj.type"> 
     <workspace-feed ng-switch-when="workspace" /> 
     <alert-feed ng-switch-when="alert" /> 
     <main-feed ng-switch-when="main" /> 
     <filter-feed ng-switch-when="filter" /> 
    </div> 

</div> 

Ich würde gerne in der Lage sein, etwas zu tun wie ... <{{obj.type}}-feed /> aber ich bin nicht sicher, ob dies gültig ist, oder ob es ein besserer Weg, dies zu schaffen.

Gedanken werden sehr geschätzt!

Answer 1

Was Sie bisher haben, sieht gut aus.

Je nachdem, wie unterschiedlich Ihre Spalten sind, können Sie nur eine Direktive verwenden, die eine Vorlage statt mehrerer Direktiven dynamisch lädt. Zum Beispiel, werfen Sie einen Blick auf ng-include:

<div ng-include="'columns/' + column.type + '.html'"></div>