153

我目前正在使用以下内容。

$scope.$$childHead.customerForm[firstName]， 以便：

<form name="customerForm">
  <input type="text" name="firstName" 
         ng-model="data.customer.firstName" 
         tabindex="1"  
         ng-disabled="!data.editable" 
         validationcustomer />
</form>

但这仅适用于 Chrome。现在我尝试了以下方法：

$scope.editCustomerForm[firstName]， 以便：

<form name="customerForm" ng-model="editCustomerForm">
  <input type="text" name="firstName" 
         ng-model="data.customer.firstName" tabindex="1"  
         ng-disabled="!data.editable" 
         validationcustomer />
</form>

这是行不通的。请注意，我的表单位于 Foundation 选项卡内。我怎样才能访问firstName？

编辑：当它在基础选项卡内时，它看起来form没有添加到。scope

有人对此有解决方案吗？

4

9 回答 9

213

您无法访问输入的原因是因为 Foundation 选项卡（或ng-repeat？）创建了一个隔离范围。解决此问题的一种方法是将控制器用作语法：

<div ng-controller="MyController as ctrl">

<!-- an example of a directive that would create an isolate scope -->
<div ng-if="true">

<form name="ctrl.myForm">
    ...inputs
    Dirty? {{ctrl.myForm.$dirty}}

    <button ng-click="ctrl.saveChanges()">Save</button>
</form>

</div>

</div>

然后您可以在代码中访问 FormController，例如：

function MyController () {
    var vm = this;
    vm.saveChanges = saveChanges;

    function saveChanges() {

       if(vm.myForm.$valid) { 
            // Save to db or whatever.
            vm.myForm.$setPristine();
       }
}
于 2014-11-25T01:10:13.120 回答
94

您可以将表单附加到父控制器中定义的某个对象。然后，您甚至可以从子范围访问您的表单。

父控制器

$scope.forms = {};

子范围内的一些模板

<form name="forms.form1">
</form>

问题是在执行控制器中的代码时不必定义表单。所以你必须做这样的事情

$scope.$watch('forms.form1', function(form) {
  if(form) {
    // your code...
  }
});
于 2014-04-09T14:18:55.247 回答
91

如果您想将表单传递给控制器​​进行验证，您可以简单地将其作为参数传递给处理提交的方法。使用表单名称，因此对于原始问题，它将类似于：

<button ng-click="submit(customerForm)">Save</button>
于 2014-06-09T15:19:19.087 回答
83

答案有点晚了，但有以下选项。它对我有用，但不确定它是否正确。

在我看来，我正在这样做：

<form name="formName">
    <div ng-init="setForm(formName);"></div>
</form>

在控制器中：

$scope.setForm = function (form) {
    $scope.myForm = form;
}

现在，在这样做之后，我的控制器变量中有我的表单$scope.myForm

于 2014-05-26T03:46:26.970 回答
23

为了能够访问控制器中的表单，您必须将其添加到虚拟作用域对象中。

就像是$scope.dummy = {}

对于您的情况，这意味着：

<form name="dummy.customerForm">

在您的控制器中，您将能够通过以下方式访问表单：

$scope.dummy.customerForm

你将能够做类似的事情

$scope.dummy.customerForm.$setPristine()

维基链接

有一个 '。' 在您的模型中将确保原型继承发挥作用。所以，使用<input type="text" ng-model="someObj.prop1">而不是<input type="text" ng-model="prop1">

如果您真的想要/需要使用原语，有两种解决方法：

1.在子作用域中使用$parent.parentScopeProperty。这将阻止子范围创建自己的属性。2.在父作用域上定义一个函数，并从子作用域调用它，将原始值传递给父作用域（并非总是可能）

于 2014-11-19T09:28:38.463 回答
22

这个答案有点晚了，但我偶然发现了一个让一切变得更容易的解决方案。

如果您使用 controllerAs 语法，您实际上可以将表单名称直接分配给您的控制器，然后从“this”变量中引用它。这是我在代码中的做法：

我通过 ui-router 配置了控制器（但你可以随心所欲地进行，即使在 HTML 中直接使用类似的东西<div ng-controller="someController as myCtrl">）这可能是 ui-router 配置中的样子：

views: {
            "": {
                templateUrl: "someTemplate.html",
                controller: "someController",
                controllerAs: "myCtrl"
            }
       }

然后在 HTML 中，您只需将表单名称设置为“controllerAs”。“名称”，如下所示：

<ng-form name="myCtrl.someForm">
    <!-- example form code here -->
    <input name="firstName" ng-model="myCtrl.user.firstName" required>
</ng-form>

现在在您的控制器中，您可以非常简单地执行此操作：

angular
.module("something")
.controller("someController",
    [
       "$scope",
        function ($scope) {
            var vm = this;
            if(vm.someForm.$valid){
              // do something
            }
    }]);
于 2016-03-21T15:35:02.300 回答
6

是的，您可以访问控制器中的表单（如文档中所述）。

除非您的表单未在控制器范围中定义而是在子范围中定义。

基本上，一些角度指令，例如ng-if，ng-repeat或ng-include，将创建一个独立的子作用域。任何定义了scope: {}属性的自定义指令也是如此。可能，您的基础组件也妨碍了您。

在标签ng-if周围引入简单时我遇到了同样的问题。<form>

有关更多信息，请参阅这些：

注意：我建议你重新写你的问题。您的问题的答案是肯定的，但您的问题略有不同：

我可以从控制器访问子范围内的表单吗？

答案很简单：不。

于 2014-04-02T22:27:28.280 回答
3

向表单添加ng-model="$ctrl.formName"属性，然后在控制器中，您可以通过以下方式将表单作为控制器内的对象访问this.formName

于 2018-03-07T12:05:42.267 回答
0

绝对不能访问范围 bec 中的表单。它不是创建的。html 模板中的 DOM 加载速度有点慢，就像控制器构造函数一样。解决方案是观察直到 DOM 加载并定义了所有范围！

在控制器中：

$timeout(function(){
    console.log('customerForm:', $scope.customerForm);
    // everything else what you need
});
于 2017-02-08T15:03:40.990 回答