Question

我需要创建一种新类型的表单元素（应该具有相同的行为：validate，value等），它将对象作为值。

例如，我需要一个“birtday元素”。单击时，将显示一个包含两个月份和日期选择的弹出窗口。（如选择日期）。当我得到价值时，我应该得到那样的东西{月：8，日：21}。同样，当提交到服务器时，数据也应该发送多字段。

其他用例：personName（firstName，lastName），price（金额，货币）。

如何在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帮助解决模块分离并消除正确排序脚本标记的麻烦
确保您正在测试您的代码，测试第一种方法通常会揭示最佳设计

Angularjs自定义表单元素

1 个答案: