[解決済み] ページロード時にAngularJSのコントローラ関数を実行する方法は?
2022-01-30 04:49:54
質問
現在、検索して結果を表示するAngular.jsのページを持っています。ユーザーは検索結果をクリックした後、戻るボタンをクリックします。検索結果を再度表示させたいのですが、検索を実行するためのトリガーがわかりません。 以下はその詳細です。
- 私のAngular.jsのページは検索ページで、検索フィールドと検索ボタンがあります。 ボタンをクリックします。ユーザーは手動でクエリを入力し、ボタンを押すと とajaxクエリが発行され、結果が表示されます。 URLを検索ワードで更新しています。これですべてうまくいく。
- ユーザーが検索結果をクリックすると、別のページに移動する - これも問題なく動作します。
- ユーザーは戻るボタンをクリックし、私のangular検索ページに戻り、検索語を含む正しいURLが表示されます。すべて正常に動作しています。
- 検索フィールドの値をURLの検索用語にバインドしたので、期待通りの検索用語が含まれています。すべて正常に動作しています。
ユーザーが"検索ボタン"を押さずに検索機能を再度実行させるにはどうしたらよいでしょうか?jqueryであれば、documentready関数の中で関数を実行することになりますね。Angular.jsに相当するものが見当たりません。
解決方法は?
一方では @Mark-Rajcok が言ったように、プライベートな内部関数で済ませることができます。
// at the bottom of your controller
var init = function () {
// check if there is query in url
// and fire search in case its value is not empty
};
// and fire it after definition
init();
また ng-init ディレクティブを使用します。実装は大体こんな感じでしょう。
// register controller in html
<div data-ng-controller="myCtrl" data-ng-init="init()"></div>
// in controller
$scope.init = function () {
// check if there is query in url
// and fire search in case its value is not empty
};
ただし、以下のように注意してください。
angularのドキュメントによると、(v1.2以降)
を使用しないこと。
ng-init
を使用します。ただし、アプリのアーキテクチャに依存すると思います。
私は
ng-init
バックエンドからangularアプリに値を渡す場合。
<div data-ng-controller="myCtrl" data-ng-init="init('%some_backend_value%')"></div>
関連
-
[解決済み] ドキュメントレディ時にAngularJSのコントローラで関数を実行するには?
-
[解決済み] AngularJSでデータバインディングはどのように機能するのですか?
-
[解決済み] AngularJSを使用して、ブラウザのコンソールで$scope変数にアクセスするにはどうすればよいですか?
-
[解決済み] AngularJSで$scope.$watchと$scope.$applyを使用するにはどうすればよいですか?
-
[解決済み] AngularJSのコントローラからビューにHTMLを挿入する
-
[解決済み] ServiceとFactoryで迷う
-
[解決済み] あるAngularJSのコントローラが別のコントローラを呼び出すことはできますか?
-
[解決済み] AngularJSでコントローラを2回実行する場合の対処法
-
[解決済み】AngularJSでページ全体を再読み込み・再レンダリングする方法
-
[解決済み] AngularJSです。コントローラコンポーネントの外からコントローラ関数を呼び出す方法
最新
-
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 実装 サイバーパンク風ボタン
おすすめ
-
[解決済み] `ui-router` $stateParams vs. $state.params
-
[解決済み】angularのonLoadとng-initの違いについて
-
[解決済み] AngularJSで$httpリクエスト中にスピナーGIFを表示する?
-
[解決済み] angularのpostリクエストでpreflightのレスポンスがHTTPステータスコード403で不正になる。
-
[解決済み] AngularJSの.$uibModalとは何ですか?
-
[解決済み] 誰かangularjsの$qサービスの使用について説明してください。[重複しています]。
-
[解決済み] AngularJSで画像を表示する
-
[解決済み] Angularjsを使用してローカルストレージにデータを保存するにはどうすればよいですか?
-
[解決済み] ドキュメントレディ時にAngularJSのコントローラで関数を実行するには?
-
[解決済み] AngularJs .$setPristineでフォームをリセットする