私はレイアウトをラップするためのディレクティブをいくつか作成しようとしています。レイアウトから抽象化することができます(それはディレクティブの主な目的の1つです)。置換ディレクティブとフォーム
それでは、私が持っているしたいことは、このようなものです:私はその後、私はそのモデルを確実にしたいこの
app.directive('dialog',()=>{
return {
template: '<div class="dialog" ng-transclude></div>',
replace: true,
transclude: true,
restrict: 'E',
}
})
ようになり、このための3つの簡単なディレクティブを作成しました
<dialog>
<dialog-title></dialog-title>
<dialog-body></dialog-body>
<dialog-footer></dialog-footer>
</dialog>
(dialog-body)で定義されているのは、そのダイアログ上に何らかのフォームが必要であり、フォームの有効/無効に依存しないで無効にできるフッターのナビゲーションボタンがあるためです。で
<body ng-controller="MainCtrl">
<p>age: {{age}}</p>
<dialog>
<p>age: {{age}}</p>
<dialog-body>
<form name="dialogForm">
<p>age: {{age}}</p>
<input ng-model="age" minlength="3"/>
</form>
</dialog-body>
<dialog-footer>
<p>age: {{age}}</p>
</dialog-footer>
</dialog>
</body>
ng-model
ダイアログ体の範囲で年齢の変数を作成しますが、それは私がオブジェクトにそれを置くそれまでは他のディレクティブに表示され、MainCtrl
に宣言していないでしょう。これは、それがどのように動作するかです:
<body ng-controller="MainCtrl">
<p>age: {{user.age}}</p>
<dialog>
<p>age: {{user.age}}</p>
<dialog-body>
<form name="dialogForm">
<p>age: {{user.age}}</p>
<input ng-model="user.age" minlength="3"/>
</form>
</dialog-body>
<dialog-footer>
<p>age: {{user.age}}</p>
</dialog-footer>
</dialog>
</body>
とコントローラ:
今app.controller('MainCtrl', function($scope) {
$scope.user = {age: 1}
})
、私はでフォームを入れたいです。これは、ng-model
と同じように、ダイアログボディのスコープでFormControllerを作成する必要があります(またはここではいくつかの違いがあります)。そしてフォームの正当性をチェックするためにダイアログフッタからアクセスする必要があります。
テンプレートにフォームを作成した後、MainCtrlのスコープでformControllerを定義する必要があります。ここでは最初の質問です - FormControllerのインスタンスを作成するにはどうすればいいですか?私は$scope.dialogForm = {$valid: true}
はテスト目的のために働くべきであると考えて、ここで私の最後のテンプレートです:
<body ng-controller="MainCtrl">
<p>age: {{user.age}}</p>
<p>validity: {{dialogForm.$valid}}</p>
<dialog>
<p>age: {{user.age}}</p>
<p>validity: {{dialogForm.$valid}}</p>
<dialog-body>
<form name="dialogForm">
<p>age: {{user.age}}</p>
<p>validity: {{dialogForm.$valid}}</p>
<input ng-model="user.age" minlength="3"/>
</form>
</dialog-body>
<dialog-footer>
<p>age: {{user.age}}</p>
<p>validity: {{dialogForm.$valid}}</p>
</dialog-footer>
</dialog>
</body>
ここでの主な問題が来ます。でフォームの有効性が変更された場合、それは他のディレクティブには反映されません。どうして?私はここで何が欠けていますか?
私の主な目標は、実際のレイアウトから抽象度を持たせるために、アプリケーションで最も使用されるコンポーネントのディレクティブを持つことです。これは別の方法で行うことができますか?ダイアログ・ボディのフォーム妥当性の変化は、それが他のディレクティブには反映されていない場合はここで