複数のフォームを含むページがあり、一度に 1 つだけ表示したい。このために、各フォームをセクションに分割し、Bootstrap のアコーディオン プラグインを使用して、一度に 1 つのセクションしか開かないようにしました。
私のマークアップは次のようになります。
<a ng-click="open_section('section1')">Section 1</a>
<div collapse="section1">
<form name="section1Form">
</form>
</div>
<a ng-click="open_section('section2')">Section 2</a>
<div collapse="section2">
<form name="section2Form">
</form>
</div>
すべてがうまく機能し、フォーム間などを移動できます。
現在編集中のセクションに検証エラーが含まれている場合、ユーザーにセクションを開いてほしくないので、open_section
関数に関連付けられているフォームが有効かどうかをチェックインしてみました。
やってみましたが、できませんでした。ページを担当するコントローラー内のフォームに関連付けられた FormController にアクセスできませんでした。何らかの理由で、スコープで公開されていません。
これは私が試したものです:
$scope.section1Form
はundefined
で試しましたが
$scope.$watch('section1Form, function(){})
、まだ未定義ですフォームの名前を 2 番目のパラメーターとして追加しようとしました
open_section
がopen_section('section1', section1Form)
、関数では 2 番目の引数はundefined
.
タグの間で<form></form>
は FormController にアクセスできますが、タグの外ではアクセスできません。イベントは<form>
(セクションの終了、開始)の外部から発生しているため、フォームの有効性を確認するために FormController をコントローラーに渡すことができません。
これを回避する方法はありますか、それともページをリファクタリングする必要がありますか?
私はAngular 1.1.5 btwを使用しています。
また、AngularJS Batarang Chrome プラグインで確認すると、フォームが現在のスコープの子スコープとして公開されていることがわかります。
編集:これは、スコープ階層がこのアプリを探す方法です
- root
|
---current controller\'s scope
|
----scope that contains the forms
これは私が使用しているからですng-include
か?コントローラーでこれらのフォームにアクセスする方法はありませんか?