1. ホーム
  2. angularjs

[解決済み] ページロード時に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>