web-dev-qa-db-ja.com

ページロード時にAngularJSコントローラ機能を実行する方法

現在、私は検索と結果の表示を可能にするAngular.jsページを持っています。ユーザーが検索結果をクリックしてから戻るボタンをクリックします。検索結果をもう一度表示したいのですが、検索を実行する方法がわかりません。詳細はこちら：

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

ユーザーが「検索ボタン」を押さなくても検索機能を再度実行するにはどうすればよいですか？それがjqueryだったなら、私はdocumentready関数の中の関数を実行するでしょう。 Angular.jsに相当するものが見当たりません。

angularjsonload
350
Duke Dougal

一方で@ 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を使用しないでください。しかし、それはあなたのアプリのアーキテクチャによって異なります。

バックエンドからAngularアプリに値を渡したいときは、ng-initを使用しました。

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

これを試して？

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

$viewContentLoadedをうまく動かすことはできませんでしたし、ng-initは実際にはng-repeatでしか使われるべきではありませんでした。まだ定義されています。

これは私がすることであり、それは私のために働きます：

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

ui-routerを使用していない限り。それはそれです：

$scope.$on('$stateChangeSuccess', function () {
  // do something
});
59
adam0101
angular.element(document).ready(function () {

    // your code here

});
42
Carlos Trujillo

Dimitriの/ Markの解決策は私にはうまくいきませんでしたが、 $ timeout 関数を使うことはあなたのコードがマークアップがレンダリングされた後にのみ実行されることを保証するためにうまくいくようです。

# Your controller, including $timeout

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

$timeout($scope.init)

それが役に立てば幸い。

29
guico

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

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

角度付きの$ windowオブジェクトを使うことができます。

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

もう一つの選択肢：

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

（ https://stackoverflow.com/a/30258904/148412 を介して）

4
ANeves

$ routeProviderを使用すると、.stateで解決してサービスをブートストラップできます。これは、サービスを解決した後にのみ、Controller and Viewをロードすることになるということです。

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
 }
}
3
Leo Lanese

私は同じ問題を抱えていて、この解決策だけが私のために働きました（それは完全なDOMがロードされた後に機能を実行します）。私はページがロードされた後にアンカーするためにスクロールにこれを使います：

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

                        // Your function that runs after all DOM is loaded

                    });
3
Ginko Balboa

そのページ専用のコントローラがある場合は、さらに別の方法があります。

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

Dmitry Evseevの回答は非常に便利です。

ケース1：angleJsのみを使用する場合：
ページのロード時にメソッドを実行するには、ビューでng-initを使用し、コントローラーでinitメソッドを宣言できます。これは、 angular ng-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'
  })

お役に立てれば

3
Kailas

あなたはどこからでも使用することができ、別のページに移動したときにはっきりしない共通のサービスに検索結果を保存することができます。そして、戻るボタンをクリックするための保存データで検索結果を設定できます。

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

あなたのバックボタン用

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

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

(function initController() {

    // do your initialize here

})();
0
Uditha Prasad