Question

我有一个表单，其中的内容由ng-include加载：

<form ng-submit="submitForm()">
  <div ng-include="currentForm"></div>
</form>

ng-include d字段不会与任何ng-model相关联，例如：

<input type="number" name="age" />
<input type="submit" value="Submit" />

如何从submitForm函数中访问表单数据？

$scope.submitForm = function() {
  // access form variables here
}

我已尝试在this内检查submitForm，但这只是吐出ChildScope对象。

Answer 1

你可以用简单的方式做到这一点，或者你可以用优雅的自负方式做到这一点：

简单的方法是将$event对象传递给提交表单，然后从那里提取表单字段：

<form ng-submit="submitForm($event)">
   <input name="bar">
</form>

并在控制器中处理：

$scope.submitForm = function(event){
   var bar = event.currentTarget.bar.value;
}

更优雅的方法是定义一个指令，将ng-model添加到包含表单中的输入元素并重新编译它。假设它的使用方式与下面类似，它将表格形式的ng-models发布到fooModel范围内：

<div ng-include="'form.html'" included-form-model="fooModel"></div>

理论上，它可能看起来像这样（该示例假定包含完整的jQuery，为了简化说明，并且所有表单元素都定义了name属性）：

.directive("includedFormModel", function($compile){
  return {
    require: "?ngInclude",
    link: function(scope, element, attrs, ngInclude){
      if (!ngInclude) return;

      var model = attrs.includedFormModel; // the name under which to publish
      scope.$parent[model] = {};

      var unwatch = scope.$on("$includeContentLoaded", function(){
        inputElements = element.find(":input").each(function(idx, elem){
           elem.setAttribute("ng-model", model + "." + elem.name);
        });
        $compile(inputElements)(scope);
      });

      scope.$on("$destroy", function(){ unwatch(); });
    }
  }
});

plunker

Answer 2

最好在元素上使用ng-model。但是你可以通过jquery

访问它

$( "input[name='age']")

从ng-included字段获取表单数据而不使用ng-model

2 个答案: