2

コントローラー内に 3 つの異なるフォームを含むペイン システムがあります。今、私が理解しているように、 ng-include は子スコープを作成し、親スコープからは利用できなくなります。

フォーム データを解決するために、ng-submit で実行する関数に ng-model を渡しましたが、これは 1 つの方法にすぎません。

通常の状況では、これを行うことができます：

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

上記のコメントに従って、子コントローラーを使用して問題を解決する 1 つの方法を次に示します。

<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 に答える