なぜコンポーネントのバインディングはコントローラで未定義なのですか?
2023-11-13 09:41:30
質問
簡単なアンギュラーコンポーネントを書いています。私はバインディングとしてパラメータを渡し、その値を画面に表示しています。すべて正常に動作しています。パラメータが画面に表示されているのが確認できます。
コンポーネントです。
var app = angular.module("test", []);
app.component("test", {
bindings: {
"contactId": "<"
},
controllerAs: "model",
controller: () => {
//output: 'contact id from controller: undefined'
console.log(`contact id from controller: ${this.contactId}`);
},
template: "<div>Contact id from view: {{model.contactId}}</div>"
});
Htmlです。
<test contact-id="8"></test>
しかし、コントローラ内からバインディングにアクセスしようとすると(console.logを参照)、バインディングの値が
undefined
. ビューでは利用できるのに、コントローラでは利用できないというのは理解できません。
私は何を間違えているのでしょうか?
ここで plnkr を参照してください。
どのように解決するのですか?
angularのコンポーネントを使用する場合、コントローラの配線が内部で行われていない点があります。
リンク
. もしこれをコントローラのコンストラクタで行おうとしているのなら、まだ
をリンクしています。
をバインディングにリンクしていないことになります。Component API は、特定のタイミングで起動するライフサイクルフックをいくつか公開しています。 あなたが探しているのは
$onInit
フックを探しています。
$onInit() - ある要素のすべてのコントローラが構築され、 バインディングが初期化された後 (そしてこの要素のディレクティブの pre & post リンク関数の前) に、それぞれのコントローラでコールされます。これは、コントローラの初期化コードを置くのによい場所です。
ドキュメントによると https://docs.angularjs.org/guide/component
関連
-
[解決済み] nullはなぜオブジェクトなのか、nullとundefinedの違いは何ですか?
-
[解決済み] AngularJS 1ページ内に複数のng-appを配置する。
-
[解決済み] ジェスト あるクラスの特定のメソッドをモックする方法
-
[解決済み] 上級者向けJavaScript。この関数はなぜ括弧でくくられるのですか?重複
-
[解決済み] jqueryでdivの要素がオーバーフローしていないかチェックする
-
[解決済み] javascript の関数から `undefined` と `null` のどちらを返すのが良いのでしょうか?
-
[解決済み] Reactコンポーネントでthis.setStateを複数回使用するとどうなりますか?
-
[解決済み] jqueryはjavascriptのライブラリなのかフレームワークなのか?[クローズド]
-
[解決済み] JavaScriptでjson-objectのキーを取得する [重複].
-
[解決済み] jQueryを使用して、すべてのクリックイベントハンドラを削除するにはどうすればよいですか?
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
[解決済み] JavaScript で範囲を作成する - 奇妙な構文
-
[解決済み] jqueryでdivの要素がオーバーフローしていないかチェックする
-
[解決済み] JavaScriptで:hoverのCSSプロパティを変更する
-
[解決済み] AngularJS - ngRepeatフィルタリングされた結果の参照を取得する方法
-
[解決済み] BlobからArrayBufferへ移行する方法
-
[解決済み] Reactメモを使うべきではない場合とは?
-
[解決済み] ECMAScriptとは?
-
[解決済み] $.ajax実行中にローディングイメージを表示する
-
[解決済み] JavaScriptのArray.sort()メソッドでシャッフルするのは正しいのか?
-
[解決済み] JavaScriptの文字列プリミティブとStringオブジェクトの違いは何ですか?