Элементы пользовательской формы Angularjs

Question

Мне нужно создать новый тип элемента формы (должен иметь такое же поведение: validate, value и т. Д.), Который имеет объект как значение.

Например, мне нужен элемент «birtday». При нажатии появляется всплывающее окно с двумя выборами для месяца и дня. (например, дату выбора). Когда я получаю значение, я должен получить что-то вроде этого {month: 8, day: 21}. Также при отправке на сервер данные также должны отправляться многопользовательскими.

Другие варианты использования: personName (firstName, lastName), цена (сумма, валюта).

Как я могу подойти к такой задаче в AngularJs?

Примеры, учебники и документы, которые я нашел, находятся далеко от такой сложной задачи.

Answer 1

Вы должны использовать сервис для хранения данных (государственный) для формы как этого

angular.module('myAppName').service('myFormService', ['$http', function($http){ 

    var formState = { 
     FirstName: '', 
     LastName: '', 
     Birthday: null 
    }; 

    // you may also want to put methods here like reset, save etc... 
    function reset() { formState.FirstName = ''; etc... } 
    function save() { $http.post(...); } 

    // this will create a singleton and will remain active across all pages 
    return { 
     FormState: formState, 
     Reset: reset, 
     Save: save 
    }; 

}]); 

Тогда для различных частей к вашей форме создать директивы, как этого

angular.module('myAppName').directive('birthdayPicker', ['myFormService', function(myFormService){ 

    function link(scope, element, attrs){ 

     // bind to this in your html 
     scope.birthday = myFormService.Birthday 
    } 

    return { 
     restrict: 'A', 
     templateUrl: 'path/to/birthdayPicker.html', 
     link: link 
    }; 
}]); 

В шаблоне HTML файл

<div> 
    <input type="text" data-ng-model="birthday" /> 
</div> 

В вашем HTML файле использовать директиву как так

<div> 
    <div data-birthday-picker=""></div> 
</div> 

Теперь, когда вы готовы, чтобы отправить форму состояния на сервер вы бы просто сделать это я рекомендовал бы положить это внутри формы службы в методе сохранения

$http.post('/someUrl', myFormService.FormState).success(successCallback); 

Несколько дополнительных советов

• использовать require.js, чтобы помочь с выделением модуля и снять головную боль правильно приказывать теги сценария

• убедитесь, что вы проверяете свой код, тест первого подход часто показывают лучший дизайн