ページの読み込み時に AngularJS コントローラー関数を実行するにはどうすればいいですか? 質問する

ページの読み込み時に AngularJS コントローラー関数を実行するにはどうすればいいですか? 質問する

現在、検索して結果を表示する Angular.js ページがあります。ユーザーは検索結果をクリックし、戻るボタンをクリックします。検索結果を再度表示したいのですが、検索の実行をトリガーする方法がわかりません。詳細は次のとおりです。

  • 私の Angular.js ページは検索ページで、検索フィールドと検索ボタンがあります。ユーザーは手動でクエリを入力してボタンを押すと、Ajax クエリが起動され、結果が表示されます。検索語で URL を更新します。これですべて正常に動作します。
  • ユーザーが検索結果をクリックすると別のページに移動しますが、これも問題なく動作します。
  • ユーザーが戻るボタンをクリックして Angular 検索ページに戻ると、検索語句を含む正しい URL が表示されます。すべて正常に動作します。
  • 検索フィールドの値を URL 内の検索用語にバインドしたので、期待される検索用語が含まれています。すべて正常に動作します。

ユーザーが「検索ボタン」を押さなくても、検索機能を再度実行するにはどうすればよいですか? jQuery の場合は、documentready 関数で関数を実行します。Angular.js の同等のものは見つかりません。

ベストアンサー1

一方、@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>

おすすめ記事