2

我有一个窗格系统，在我的控制器内包含三种不同的表单。现在，据我了解 ng-include 创建了一个子作用域，使其在父作用域中不可用。

为了解决表单数据，我将 ng-model 传回了我在 ng-submit 中运行的函数中，但这只是一种方式。

在正常情况下，我可以这样做：

HTML Form tag example
<form novalidate name="myForm" ng-submit="someFunction(form)">

HTML Form Field example
<input ng-model="form.first_name" name="first_name" type="text" pwtest required/>

Controller
$scope.myForm.first_name.$setValidity('required', false);

这工作正常，我的表单数据被返回，我可以将它发送到我的 API 并且我的字段状态也被正确设置。

现在问题..

HTML Form tag example
<form novalidate name="myForm" ng-submit="someFunction(form)">

HTML Form Field example
<input ng-model="form.first_name" name="first_name" type="text" pwtest required/>

Controller
$scope.myForm.first_name.$setValidity('required', false); <-- fails since myForm doesnt exist

这正常工作，但现在我的表单存在于子范围中，因此myForm在我的控制器中变得未定义，因为它当然应该是，因为它不存在于范围中。

问题是，如何从父控制器控制子范围内的表单字段状态？

4

1 回答 1

4

根据上面的评论，这是使用子控制器解决问题的一种方法：

<script type="text/ng-template" id="/form.html">
    <form novalidate name="myForm" ng-submit="someFn()" ng-controller="ChildFormCtrl">
       <input ng-model="form.first_name" name="first_name" type="text" required> 
       <br>{{myForm.first_name.$valid}}
    </form>
</script>

<div ng-controller="MyCtrl">
    <div ng-include="'/form.html'"></div>
</div>


function ChildFormCtrl($scope) {
    $scope.someFn = function () {
        console.log('child', $scope.form);
        $scope.myForm.first_name.$setValidity('required', false);
        $scope.parentFunction($scope.form);
    }
}
function MyCtrl($scope) {
    $scope.parentFunction = function (form) {
        console.log('parent', form);
    }
}

fiddle

于 2013-08-22T14:21:59.253 回答