2016-04-21 4 views
3

Ich arbeite mit der Angular Formly-Bibliothek, um Formulare zu generieren. Mit dieser Bibliothek können Sie Formulare mit JSON-Objekten erstellen. Ich arbeite an einem dynamischen Eltern-Kind-Drop-Down-:Kann ich einen Controller in dieses Formly-Selectbox-Objekt einfügen?

http://jsbin.com/fiqubibawi/edit?js,output

Die vm.formFields Array enthält mehrere Objekte, die beschreiben, wie die Eingabefelder gebaut werden soll. Jedes dieser Objekte enthält ein Objekt controller. Genau so klingt es: ein Angular Controller. Hier ist ein Beispiel Objekt:

{ 
    key: 'sport', 
    type: 'select', 
    templateOptions: { 
     label: 'Sport', 
     options: [], 
     valueProp: 'id', 
     labelProp: 'name', 
    }, 
    controller: /* @ngInject */ function($scope, DataService) { 
     $scope.to.loading = DataService.sports().then(function(response){ 
     $scope.to.options = response; 
     return response; 
     }); 

    } 
    } 

Mein Problem: Ich erzeugen diese Objekte Server-Seite (ASP.NET), und sie mit JSON an den Browser senden. Das bedeutet, dass ich die Controller-Funktionalität zu diesem Objekt nicht hinzufügen kann. Was würde ich lieber:

{ 
    key: 'sport', 
    type: 'select', 
    templateOptions: { 
     label: 'Sport', 
     options: [], 
     valueProp: 'id', 
     labelProp: 'name', 
    }, 
    controller: ['MyCoolController']  
    } 
    } 

Gibt es eine Möglichkeit in Angular, oder sonst etwas schmutzig JavaScript hacken, diesen Code zu erhalten zu arbeiten? Es muss eine Zeichenkette sein, da die JSON-Spezifikation keine Funktionen erlaubt, die über die Leitung gesendet werden.

Antwort

2

Zum Glück können Sie Angulars Abhängigkeitsinjektion verwenden.

einfach einen neuen Controller

app.controller('TestController', function($scope, DataService) { 
    $scope.to.loading = DataService.sports().then(function(response){ 
    $scope.to.options = response; 
     return response; 
    }); 
}); 

Dann erklären Sie in der Lage sind, den Namen zu injizieren 'TestController' (Ich habe Ihre jsbin aktualisiert diese zu reflektieren)

vm.formFields = [{ 
    key: 'sport', 
    type: 'select', 
    templateOptions: { 
    label: 'Sport', 
    options: [], 
    valueProp: 'id', 
    labelProp: 'name', 
    }, 
    controller: 'TestController' 
}, 
... 
]; 
+0

Dank, great stuff. Es wäre schön gewesen, wenn dies in der Dokumentation auf der Formly-Website erwähnt wurde. – ohyeah