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

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

• 私のAngular.jsページは、検索フィールドと検索ボタンを備えた検索ページです。ユーザーは手動でクエリを入力してボタンを押すと、ajaxクエリが実行され、結果が表示されます。検索語でURLを更新します。それはすべてうまくいきます。
• ユーザーが検索結果をクリックすると、別のページが表示されます-これも正常に機能します。
• ユーザーが[戻る]ボタンをクリックして、角度検索ページに戻ると、検索語を含む正しい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
};

ただし、角度のあるドキュメントでは（v1.2以降）使用しないことが示唆さng-initれているため、注意が必要です。ただし、imoはアプリのアーキテクチャに依存します。

ng-initバックエンドから角度付きアプリに値を渡したいときに使用しました：

<div data-ng-controller="myCtrl" data-ng-init="init('%some_backend_value%')"></div>

これを試して？

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

私は$viewContentLoaded私のために働くことができなかったのでng-init、ng-repeat（ドキュメントによると）実際にのみ使用する必要があり、コントローラで直接関数を呼び出すと、コードがまだ定義されていない要素に依存している場合にエラーが発生する可能性があります。

これは私がやっていることであり、私にとってはうまくいきます：

$scope.$on('$routeChangeSuccess', function () {
  // do something
});

を使用してui-routerいる場合を除きます。次にそれは：

$scope.$on('$stateChangeSuccess', function () {
  // do something
});

angular.element(document).ready(function () {

    // your code here

});

Dimitri's / Mark'sソリューションは私にとっては機能しませんでしたが、$ timeout関数を使用すると、マークアップがレンダリングされた後にのみコードが実行されるように機能するようです。

# Your controller, including $timeout

var $scope.init = function(){
 //your code
}

$timeout($scope.init)

それが役に立てば幸い。

これは、viewContentLoaded DOMオブジェクトが変化するのを監視して何かをしたい場合に行うことができます。$ scope。$ onの使用も機能しますが、ルーティングに1ページモードがある場合は特に異なります。

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

angularの$ windowオブジェクトを使用できます：

$window.onload = function(e) {
  //your magic here
}

別の選択肢：

var myInit = function () {
    //...
};
angular.element(document).ready(myInit);

（https://stackoverflow.com/a/30258904/148412経由）

そのページに固有のコントローラーがある場合のさらに別の方法：

(function(){
    //code to run
}());

$ routeProviderを使用すると、.stateを解決してサービスをブートストラップできます。つまり、サービスを解決した後でのみ、コントローラーとビューをロードします。

UIルート

 .state('nn', {
        url: "/nn",
        templateUrl: "views/home/n.html",
        controller: 'nnCtrl',
        resolve: {
          initialised: function (ourBootstrapService, $q) {

            var deferred = $q.defer();

            ourBootstrapService.init().then(function(initialised) {
              deferred.resolve(initialised);
            });
            return deferred.promise;
          }
        }
      })

サービス

function ourBootstrapService() {

 function init(){ 
    // this is what we need
 }
}

Dmitry Evseevの回答が非常に役に立ちました。

ケース1：angularJsのみを使用
する：ページの読み込み時にメソッドを実行するにng-initは、ビューでを使用し、コントローラーでinitメソッドを宣言できます。

このディレクティブは、テンプレートに不要なロジックを追加するために悪用される可能性があります。以下のデモに示されているように、ngRepeatの特殊なプロパティのエイリアスなど、ngInitの適切な使用はごくわずかです。サーバー側のスクリプトを介してデータを注入するため。これらのいくつかのケースに加えて、スコープの値を初期化するには、ngInitではなくコントローラーを使用する必要があります。

HTML：

<div ng-controller="searchController()">
    <!-- renaming view code here, including the search box and the buttons -->
</div>

コントローラ：

app.controller('SearchCtrl', function(){

    var doSearch = function(keyword){
        //Search code here
    }

    doSearch($routeParams.searchKeyword);
})

警告：別の目的で使用される別のビューにこのコントローラーを使用しないでください。検索メソッドもそこで実行されます。

ケース2：Ionicの使用：
上記のコードは機能しますが、次のようにビューキャッシュが無効になっていることを確認しroute.jsてください。

route.js

.state('app', {
    url           : '/search',
    cache         : false, //disable caching of the view here
    templateUrl   : 'templates/search.html'   ,
    controller    : 'SearchCtrl'
  })

お役に立てれば

私は同じ問題を抱えており、このソリューションのみが機能しました（完全なDOMがロードされた後に関数を実行します）。私はこれをスクロールに使用して、ページが読み込まれた後にアンカーします：

angular.element(window.document.body).ready(function () {

                        // Your function that runs after all DOM is loaded

                    });

検索結果は、どこからでも使用でき、別のページに移動してもクリアされない共通サービスに保存できます。次に、保存したデータを使用して検索結果を設定し、[戻る]ボタンをクリックします。

function search(searchTerm) {
    // retrieve the data here;
    RetrievedData = CallService();
    CommonFunctionalityService.saveSerachResults(RetrievedData);
} 

バックボタンに

function Backbutton() {
    RetrievedData = CommonFunctionalityService.retrieveResults();
}

自己初期化関数内の初期メソッドを呼び出します。

(function initController() {

    // do your initialize here

})();