問題タブ [angularjs-controlleras]

controller as構文に関しては、これまで一度も使用したことがないため、少し混乱しています。これを修正する正しい方法を知りたいです。検索しても同様の問題は見つかりませんでした。

メニューとメニューを切り替えるボタンがあります。メニューには独自のスコープがあり、ボタンには別のスコープがあります。これらは 2 つの別個のファイルとコンテナーに存在するからです。

nav.isActiveボタンをクリックすると、ボタンの範囲内でのみ更新されます。状態を保存するためのサービスを作成しましたが、これは考えたときに行う必要はありません..すべきでしょうか? その値が変化したかどうかを監視する唯一の方法はウォッチャーを使用することであり、機能がない$scopeため使用する必要がありますが、パフォーマンスに影響を与えるため、これをできる限り避けたいと考えています。このプロジェクトでは重要です。this$watch

controller as構文を使用するときに、別の「スコープ」から「スコープ」変数を更新する正しい方法は何ですか?

コントローラ：

あるスコープから別のスコープに値を渡すためのサービス:

メニュー マークアップ (menu.html):

メニューを切り替えるボタン (header.html):

controllerAs 構文を使用していますが、何らかの理由で、コントローラーのフィールドを $interval で更新すると、ビュー内の要素が適切に表示/非表示になりません。angularのUIルーターを使用しています。

この問題は、私が考えるコードで最もよく説明されているので、コード ダンプを許してください。

私の状態（「refreshLogs」は、単に更新されたログのために logService を呼び出す関数です）：

私のコントローラー：

そして最後にビュー：

DOM 更新で「ng-show」値が表示されますが、この値に基づいて要素が表示/非表示になりません。Chrome で DOM を調べたところ、次のように表示されました (強調のためにアスタリスクが追加されています)。

どちらが正しいか、適切な div が表示されます。数秒後、ログが更新され、"vm.log" 変数が null 以外の値に設定されます (この値を割り当てる JS コードにブレークポイントを設定したため、これは正しいように見えます)。その後、DOM を再度検査すると、次のように表示されます。

正しい値を示す「ng-show」属性に注意してください。だから、表現は明らかに再評価されました。ただし、古い「Waiting for log...」ヘッダーは引き続き表示され、最初の div は表示されません (「ng-hide」CSS クラスが適用されたままです)。

ここで何が欠けていますか？

それは悪いタイトルです。私は知っています。それは、この質問の仕方がよくわからないからです。私は2つの本質的に同一のクラスを持っていますが、動作が少し異なり、controllerAs: 'vm'それぞれの状態設定で対応するものも動作が異なり、Webstormからの「このメソッドは静的である可能性があります」という厄介な警告が一方に表示され、もう一方には表示されません.

index.html :

app.js

main.js

main.html

main.controller.js

ポートフォリオ.js

ポートフォリオ.html

ポートフォリオ.コントローラー.js

いつものように、あなたの考えやコメントをとても楽しみにしています。

コントローラー変数がコントローラー コードに従って正しく初期化されていないという問題があります。

コントローラーコードは

ui-router は

モデルの出力を表示するために、基本的な html を検証します。

Chrome でコードをデバッグすると、コントローラー コードが渡され、モデルとデータの両方が正しく設定されますが、ページの読み込みが完了すると、vm.model が空白になります。何が間違っているのかわかりません。

前もって感謝します。

完全なフォームを構築するためにさまざまなディレクティブを呼び出す巨大なフォームを構築しています。Form Builder を呼び出すメイン ページは、次のように ng-model データを渡します。

次に、フォームビルダーページはさまざまな子ディレクティブを呼び出して、フォームのさまざまなセクションを構築します。

コントローラーで使用する場合、次のように子ディレクティブで$scope問題なくアクセスできました。$scope

$scopeしかし、 を削除してを使い始めて以来ControllerAs、親子コントローラーを使用した双方向バインディングへのアクセスにさまざまな問題が発生しています。

何をしようとしても、障害物に到達しています。私が試したことは次のとおりです。

1. 分離スコープ:子ディレクティブに分離スコープとしてformData.formFieldsand を渡そうとしましたが、ネストされた分離スコープが原因でエラーが発生するため、それは不可能です。formData.photoFields$compile: MultiDir
2. フォーム セクションごとに個別のディレクティブを持たず、それらすべてをディレクティブの下の 1 つのディレクティブにformBuilder含めると、膨大なディレクティブになります。上記は単なるスケッチですが、各子ディレクティブは最終的にまとめられた 1 つの大きなフォームを構築します。したがって、それらを一緒にマージすることは、保守が困難になり、読み取り不能になるため、実際には最後の手段です。
3. 私がこれまで見てきたこと ControllerAsから、子ディレクティブから親ディレクティブにアクセスする方法はないと思います。Controller
4. のような子ディレクティブ テンプレートの ng-model で親の ControllerAs を使用すると、正常に<input type=“text” ng-model=“fb.formData.formFields.text" />動作しますが、実行できない処理のために Child ディレクティブのコントローラーから同じものにアクセスする必要があります。
5. を削除し て再度controllerAs使用すると、以前と同じように機能しますが、将来の Angular の変更に備えるため$scopeに、 を完全に削除しようとしています。$scope

$scopeこれは高度なフォームであるため、さまざまなフォーム セクションを処理するための個別のディレクティブが必要です。また、Angular 1.2 以降、ネストされた分離スコープが許可されていないため、特に使用を取り除こうとすると、さらに困難になりControllerAsます。

ここで私のオプションは何ですか？私の長い文章を読んでいただきありがとうございます。

何が欠けているのか理解できません

HTMLで結果が得られないcontrollerAs構文で管理するこの問題だと思います

注：コンソールで結果を確認できますconsole.log(this.movie); -コントローラーから

app.js

controller.js

html - テンプレート/detail.html

私の試み