2016-04-21 2 views
3

Я работаю с Angular Formly library для создания форм. Эта библиотека позволяет создавать формы с объектами JSON. Я работаю на динамическом родитель-потомок выпадающего списка:Могу ли я ввести контроллер в этот объект Formable selectbox?

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

vm.formFields массив содержит несколько объектов, которые описывают, как должны быть построены поля ввода. Каждый из этих объектов содержит объект controller. Это именно то, на что это похоже: угловой контроллер. Вот пример объект:

{ 
    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; 
     }); 

    } 
    } 

Моей проблема: я произвожу эти объекты на сторону сервера (ASP.NET), и отправить их в браузер с JSON. Это означает, что я не могу добавить функциональность контроллера к этому объекту. То, что я предпочел бы:

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

Есть ли способ в Угловом или иначе некотором грязное JavaScript взломать, чтобы получить этот код, чтобы работать? Это строка, поскольку спецификация JSON не позволяет отправлять функции по проводу.

ответ

2

К счастью, вы можете использовать инъекцию зависимости Angular.

Просто объявить новый контроллер

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

Тогда вы можете вводить, используя имя 'TestController' (Я обновил свой jsbin, чтобы отразить это)

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

Спасибо, большой материал. Было бы неплохо, если бы это было упомянуто в документации на веб-сайте Formly. – ohyeah

Смежные вопросы