ページロード時にAngularJSコントローラの関数を実行するには？

現在、検索して結果を表示するAngular.jsのページがあります。ユーザーが検索結果をクリックした後、戻るボタンをクリックしました。検索結果を再度表示させたいのですが、どうやって検索を実行させるのかがわかりません。 詳細は以下の通りです。

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

ユーザーが"search button"を押さなくても、検索機能を再度実行させるにはどうしたらいいですか？jqueryであれば、documentready関数の中で関数を実行します。Angular.jsではそれに相当するものが見当たりません。

Roshana Pitigala
編集された質問 22日 6月 2018 в 12:43
プログラミング
angularjs onload
17日 3月 2013 в 7:43
20 ビュー
ソリューション

一方で、@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 documentation implies (since v1.2)では、ng-initを使用しないようになっていますので、注意が必要です。ただし、アプリのアーキテクチャにもよりますが。

私が ng-init を使ったのは、バックエンドから angular アプリに値を渡したいときでした。

<div data-ng-controller="myCtrl" data-ng-init="init('%some_backend_value%')"></div>
Dmitry Evseev
編集した答え 8日 12月 2013 в 10:33
解説 (9)

試してみてください。

$scope.$on('$viewContentLoaded', function() {
    //call it here
});
解説 (5)

viewContentLoadedのDOMオブジェクトが変化するのを見て、何かをしたい場合にこの方法を使うことができます。$scope.$onを使っても動作しますが、特にルーティングで1ページモードを使用している場合は異なります。 

 $scope.$watch('$viewContentLoaded', function(){
    // do something
 });
解説 (1)