AngularJS - 通过指令实现模块化表单

15 浏览
0 Comments

AngularJS - 通过指令实现模块化表单

我最初在这里提出了这个问题，但我觉得自己急于行动，把问题复杂化了，所以在这里重新提问，措辞更清晰一些。

如何使用指令和可重复使用的参数创建可重复使用的表单小部件？就像这样：

指令模板似乎不允许在ng-model上进行插值。

此外，你能否将表单行为进行模块化和参数化，以便拥有标准的POST操作，例如？

我根据我的实验回答了这个问题，但我会暂时不接受它，因为我对Angular非常新，想听听别人的意见。

0

1 答案

0 Comments

AngularJS - 模块化表单与指令

在AngularJS中，可以使用

标签来创建一个控制器的作用域，使得表单和其中的所有标签都在该作用域下。具体操作如下：

JavaScript代码如下：

var app = angular.app('TestApp', []);
app.controller('FormCtrl', function($scope) {
    $scope.submit = function() {
        // 表单提交逻辑
        console.log("Submitting the form");
        console.log($scope);
    }
})

这样就为表单创建了一个作用域，testForm是表单的JavaScript对象，testForm.firstInput是第一个输入框的JavaScript对象。这些对象还具有一些可用的验证功能，详见文档。

表单中的数据将作为一个名为"data"的对象在FormCtrl作用域中可用，其中的键为"first"和"second"，可以在控制器中定义使用这些数据的方法。

可以在同一个FormCtrl中放置多个表单，AngularJS会为每个表单创建新的实例，所以不必担心表单之间的数据会相互影响。

使用指令

假设我们有一个在指令中实现的复杂输入或小部件。以下示例使用两个下拉框来显示一个州中的所有城市。首先选择一个州，然后它将查询该州的城市并填充第二个下拉框。

app.directive('citySelect', function() {
    return {
        replace: true,
        template: '
' +
                  '
',
        controller: function($scope) {
            // 省略了getCities()的逻辑，它会放在这里
        }
    };
})

然后只需将指令放入

标签中，它就会起作用。因为指令没有定义作用域，它将附加到FormCtrl的作用域上。

参数化指令

编辑：

原来这样是可以工作的：

scope: {someParameter: "="},
template: '
'

您只需去掉大括号，它就会绑定。我猜父作用域将someParameter绑定到子作用域中的someParameter，然后select会绑定到子作用域中的someParameter。

因此，下面关于在链接函数中手动编译的所有内容都是不必要的。

但是，我这里的citySelect指令有一个硬编码的ng-model绑定，所以如果我创建了某种通用小部件，我不能在一个表单中使用多个该小部件。不幸的是，这种方法似乎不起作用：

scope: {someParameter: "="},
template: '
'

我唯一使其工作的方法是在链接函数中手动构建DOM元素，但我不确定这是否可取。希望有人对这种实现提出意见：




    
    
    

    

    



app.directive('citySelect', function($compile) {
    return {
        replace: true,
        template: '
',
        controller: function($scope) {
            // 省略了getCities()的逻辑，它会放在这里
        }
        link: function(scope, iElem, iAttrs) {
            var html = '