問題タブ [angularjs-components]

.component()Angular 1.5の構文を試しています。

最新の方法は、コントローラーを別のファイルではなく、コンポーネント内にインラインでコーディングすることであると思われます。コンポーネントのボイラープレートが最小限であることを考えると、その利点がわかります。

問題は、コントローラーを typescript クラスとしてコーディングしており、Angular2 と一貫しているように見えるため、引き続きコーディングを続けたいということです。

私の最善の努力は次のようなものです：

動作しますが、エレガントではありません。より良い方法はありますか？

したがって、私はコンポーネント、バインディング、および Angular 2 パラダイムに比較的慣れていません。Angular 1.3 アプリケーションを転送できるようにしたいので、新しいコンポーネント ディレクティブを採用しようとしています。

ただし、割り当て不可のバインディング エラーを回避できませんでした。

コンポーネントを含める場所は次のとおりです。

そしてコンポーネント自体：

コンポーネント テンプレート:

ここで非常に明白な何かが欠けているように感じます。どんな助けでも大歓迎です。

ディレクティブ/コンポーネントを使用し、バインディングとして関数を渡す次の単純なコントローラーがあります。

関数が呼び出されているとき、コントローラークラスのサービスを使用するための参照がありません。

この場合、コントローラーpublic onTileClicked関数では tileService にアクセスできません

コントローラーjs:

コントローラのhtml:

ディレクティブ js:

onTileClicked js:

私は 1.5 の角度コンポーネントを使用して速度を上げることに取り組んでいます。私は todd Motto のビデオをフォローして、angular のドキュメントhttps://docs.angularjs.org/guide/componentとともにコンポーネントを使い始めました 。

この時点で、コントローラーを使用するディレクティブの代わりにコンポーネントが使用されているように見えますが、1.5 のコードでは、DOM 操作にディレクティブを引き続き使用します。

コンポーネントコントローラー内の $element、$attrs の目的は何ですか? これらは操作できるようです。これは、ドキュメントのプランカーへのリンクです。彼らが $element を使用していないことは知っていますが、それは私が読んでいる例です。http://plnkr.co/edit/Ycjh1mb2IUuUAK4arUxe?p=preview

しかし、そのようなコードでは...

DOM を操作していない場合、$element はどのように使用されますか?

「置換」構成は一般的に非推奨であり、1.5 angular.component では使用できないため、コンポーネントのスタイルを設定し、再利用性を高く保つためのベスト プラクティスは何でしょうか。

例：

たとえば、「btn-primary」で使用するときにボタンのスタイルを設定したいとしましょう。

できない

レンダリングされたhtmlは次のようになります。

コンポーネント (ボタン) にスケーラブルで適切な方法でコンテキスト スタイルを適用する方法についてのアイデアはありますか?

カスタム ディレクティブを新しいコンポーネント アーキテクチャにアップグレードしています。コンポーネントがウォッチャーをサポートしていないことを読みました。これは正しいです？もしそうなら、オブジェクトの変化をどのように検出しますか? myBox基本的な例として、ゲームにバインディングを持つ子コンポーネント game を持つカスタム コンポーネントがあります。ゲーム コンポーネント内に変更ゲームがある場合、myBox 内にアラート メッセージを表示するにはどうすればよいですか? rxJS メソッドがあることを理解していますが、これを純粋に角度で行うことは可能ですか? 私のJSFiddle

JavaScript

HTML

angularコンポーネントの出力バインディング関数からコントローラースコープにアクセスできません

ダッシュボードコンポーネントからホーム コントローラーのスコープにアクセスしようとしていますが、未定義です。

2 番目の方法も試しましたが、関数変数が未定義です。

TypescriptでAngular 1.5を使用しています

最初のアプローチ:

ホームコントローラーの HTML:

ホームコントローラーjs:

ダッシュボード コントローラ js:

2 番目のアプローチ:

ホームコントローラーの HTML:

ダッシュボード コントローラ js:

そして、ここで私は反対を得ています：

両方の提案を個別に読みましたが、それらをつなぎ合わせるのに苦労しています。

したがって、 component() を使用して bindings プロパティを設定し、コンポーネントの外部からデータを取得できます。

ただし、新しい angular ルーターには、これらのバインディングを介してデータを渡すメカニズムがないようです。

むしろ、私が見つけた例は、コンポーネントのコントローラーに $routeParams を挿入することです。

しかし、それはコンポーネントの再利用性を制限します! ここで何か不足していますか？コンポーネントに値をバインドするようにルーターを設定するにはどうすればよいですか?

私は Angular の初心者で、標準コントローラーと ngResource を使用して記述された単純な CRUD アプリを適応させて、1.5 で導入されたコンポーネントを使用しています。これまでに見つけたドキュメントやリソースで、次の方法について説明しているものはありません。

• 新しいアイテムをゼロから作成する
• ngResource と統合する

ですから、どのように進めるのが最善かについて、誰かがいくつかの指針を与えることができるかどうか疑問に思っています。

私の既存のアプリには、リソース エンティティを宣言する単純なファクトリと、それを実行する単一のコントローラーがあります。

• リソースの新しいインスタンスをインスタンス化します。$scope.newEntity = new Entity();
• $scopeバックエンドから取得したリソースのリストを に入力します。Entity.query(function (data) { $scope.entities = data; });
• リソースを削除、更新、およびバックエンドに保存するための関数をいくつか提供します。

HTML には、動作するフォームと$scope.newEntity、新しいエンティティをバックエンドに保存するコントローラー保存メソッドがあります。ng-repeatに保存されているエントリを一覧表示するもあり、いくつかの編集と削除を実行するための がいくつか$scope.entities追加されています。ng-click

私が今やりたいことは、リストにインライン編集を実装することです。既存のアプローチでこれを実行できることはわかっていますが、エンティティ編集コードの既存のエンティティ作成フォームにあるフォーム検証機能を複製せずにきれいに再利用したいと考えています。コンポーネントは、私の（確かに経験の浅い）目には自然にフィットするように見えます。

コンポーネント ベースのアプローチでは、https://docs.angularjs.org/guide/componentのExample of a component treeentity-listのドキュメントに従い、 andコンポーネントを作成しましたentity-detail。on-deleteこれらは今のところ問題なく動作しており、とon-updateイベントを接続する方法を理解できると思います。私が理解できないのは、on-createイベントへのアプローチ方法です。

作成イベントを処理するために、既存の単純なフォームで完全に別のコントローラーを使用する必要がありますか? その場合、既存のリストを自動的に更新するにはどうすればよいですか? その作成イベントはリスト コントローラーに伝播しますか?

または、既存のリスト コントローラーに何か不足していますか? それとも、エンティティの作成は詳細コントローラーの特殊なケースですか?

Angular 2 にも対応できるようにしたいので、Angular コンポーネントと ngResource を使用してこれを実装する方法に関する情報を特に探しています。まったく異なるアプローチを使用してこれを達成するか、コンポーネントなしで HTML コードを再利用する方法。ありがとう！