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か?

編集: Foundation タブ内にformある場合、 が追加されていないようです。scope

誰でもこれに対する解決策を持っていますか?

4

9 に答える 9

213

入力にアクセスできない理由は、Foundation タブ (またはng-repeat?) がisolate スコープを作成するためです。これに対処する 1 つの方法は、コントローラーを構文として使用することです。

<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">

プリミティブを本当に使用したい/使用する必要がある場合は、次の 2 つの回避策があります。

1.子スコープで $parent.parentScopeProperty を使用します。これにより、子スコープが独自のプロパティを作成できなくなります。2.親スコープで関数を定義し、子から呼び出して、プリミティブ値を親に渡します (常に可能であるとは限りません)。

于 2014-11-19T09:28:38.463 に答える
22

この答えは少し遅れていますが、すべてをもっと簡単にする解決策を見つけました.

controllerAs 構文を使用している場合は、フォーム名をコントローラーに直接割り当ててから、「this」変数から参照することができます。これが私のコードでのやり方です：

私は ui-router 経由でコントローラーを構成しました (ただし、HTML で のようなものを直接使用しても、必要に応じて実行できます<div ng-controller="someController as myCtrl">)。

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

HTML では、次のようにフォーム名を "controllerAs"."name" として設定します。

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