問題タブ [angular-components]

angular 1.5 兄弟コンポーネントおよび/またはディレクティブ間で通信する最良の方法は何ですか? 角材を使用しています。私はui-routerを使用しています。

コンポーネントとディレクティブを分離し、相互に依存しないようにしています。

必要に応じて、ディレクティブを .component() モジュールにリファクタリングしたいと思います。

ディレクティブ (navBar) に分離したナビゲーション バーがあります。そのナビゲーションバーには、リストをフィルタリングしたい検索バーがあります。リストは兄弟ディレクティブにあります。

もともと、ui-router で定義されている MainCtrl の範囲外に navbar ディレクティブがありました (そして、それを .component() として使用しようとしました)。ナビゲーションバーはアプリケーション全体で比較的一貫しているため、これは私には理にかなっているように思えました。

MainCtrl のスコープ内に配置することを延期し、MainCtrl のプロパティを navBar ディレクティブの要素にバインドできるようにしました。navBar と fileBrowser が MainCtrl と結合されているため、これは間違っているようです。

私が調べていた他のオプション：

および scope.$watch() を使用して、子コンポーネントの navBar から親コンポーネントのプロパティを定義します。次に、もう一方の子コンポーネントである fileBrowser で、scope.$watch() を使用して親コンポーネントでのこれらの変更を監視し、それに応じて応答します。

サービスを使用してデータを保存し、データを渡す。

$emit、$broadcast イベントの使用。

この状況でディレクティブ/コンポーネントを分離しておくための最善の解決策は何ですか? 兄弟ディレクティブ/コンポーネント間で通信するための最良/最もクリーン/推奨される方法は何ですか?

この状態は ui-router によって開始されます

main.component.js

main.html

兄弟ディレクティブまたはコンポーネント ファイルブラウザにあるリストを navbar でフィルタリングしたい

navbar.directive.js

navbar.html

これは、フィルタリングしたいリストがある場所です。

filebrowser.js

filebrowser.html

私は、このガイドに従ってレガシー Angular 1.5 アプリの「スコープ スープ」アーキテクチャを排除しようとしています: http://teropa.info/blog/2015/10/18/refactoring-angular-apps-to-components. html#replace-external-reference-with-bound-input

への参照を削除しようとしている$rootscope.taskuiので、コンポーネントにバインディングを追加しようとしました。残念ながら、taskui現在は未定義です。「コンポーネント」は Angular 1.5 コンポーネントです (これは内部の通常のディレクティブです)。私は何か間違ったことをしていますか？

「this.taskui」を「$rootscope.taskui」に置き換えると (正しく挿入されます)、methodtaskui オブジェクトが正常に出力されます。

コントローラーのコードは次のとおりです。

Angular 1.5 コンポーネントでアプリを作成します。パラメータを介してコンポーネントにデータを提供しresolveます。これにより、同じコンポーネント内のさまざまなソースからのデータを表示できます。しかし、コンポーネントの一部のデータを変更する方法がわかりません。

たとえば、API を介してユーザーと連携するユーザー サービスがあります。私の状態では、コンポーネントをロードし、Users.get() メソッドを使用します。UIルーターを使用しています。

このコンポーネントにフォームがあり、データを変更したいと考えています。フォームが送信されるときに、Users.update() メソッドを呼び出したいと思います。しかし、コンポーネントは Users サービスについて何も知りません。そのとおりです。

この状態でデータを更新するためにコンポーネントが Users.update() を使用する必要があることをどのように指定できますか? そして、フォームが送信されるときにコンポーネントでこのメソッドを呼び出す方法は?

この単純化された Angular 1.5.x コンポーネントを考えてみましょう (すべてjsfiddleにあります):

Html (本文中)

コンポーネント ボタンをクリックすると、count 変数が更新されます ('&' onUpdate が適切にバインドされます)。

ここで、ui.router からコンポーネントへのルートが必要です。

状態に移動Cannot read property '2' of nullすると、onUpdate メンバーを削除するとエラーが修正されますが、バインディングが壊れます。

私は何を間違っていますか？コンポーネントへの ui.router ルートを使用するときに、コンポーネントのコールバック メソッドをバインドする方法は何ですか。

jsfiddle

コンポーネントに渡されたバインディングは html では機能しますが、コントローラーでは未定義です。

hero.component.js

HeroController.js

hero.html

角度バージョンを使用しています1.5.0

Angular 1.5 コンポーネントを使用して展開折りたたみのようなものを構築しようとしています。アイデアは、これらを 1 つまたは複数並べて配置したり、ネストしてツリーを作成したりできるということです。したがって、有効な html は次のようになります。

または

したがって、私の質問は、レベル 2 の展開-折りたたみが親の展開-折りたたみを認識できるように、 Angular 1.5 コンポーネント(ディレクティブではない)を使用してこれを行うことができるかどうかです。通常、このようなコンポーネントをネストすると、次のようになると思います。

ただし、A) この場合、ネストは必須ではありません。B) parentCtrl は、現在の $ctrl への終わりのない再帰参照になります。

これはコンポーネントでできることですか? それとも、何らかの理由で明示的に禁止されていますか?

Angular 2 で同じコンポーネントを再度リロードするにはどうすればよいですか?

以下は私のコードです：

nextproduct()テンプレートのクリック イベントにバインドされています。

これuidproductは、多数のプロパティを持つ JSON オブジェクトであり、DOM を次のように更新しています。{{uidproduct.classname}}

これをテンプレートで次のように使用しています。

をクリックする<button (click)="nextproduct()">と、DOM のクラス プロパティが変更されますが、外部スクリプトを有効にするにはコンポーネントをリロードする必要があります。

angular 1.5 コンポーネントの html を介して文字列をバインドしようとしています。次のようなエラー メッセージが表示されます。

これは、コンポーネントを呼び出している html です。

index.html

およびコンポーネント:

およびコンポーネント html:

子コンポーネントに双方向バインディングを実装する際に問題が発生しています。したがって、私の目標は、配列に新しいオブジェクトが追加/削除されたときに、親コンポーネントの配列にもその変更が反映されるようにすることです。より詳細なコードを次に示します。

親コンポーネント コントローラ:

親コンポーネント html:

子コンポーネント:

子コントローラー:

これは私が得ているエラーです。バインディングに関係していると確信していますが、何が悪いのかわかりません。どんなアドバイスでも大歓迎です！