367

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

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

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

4

14 に答える 14

435

一方では、@ 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>
于 2013-03-17T16:22:59.207 に答える
136

これを試して？

$scope.$on('$viewContentLoaded', function() {
    //call it here
});
于 2013-03-17T08:52:06.247 に答える
60

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

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

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

を使用していない限りui-router。それは次のとおりです。

$scope.$on('$stateChangeSuccess', function () {
  // do something
});
于 2014-08-15T20:39:41.127 に答える
47 
angular.element(document).ready(function () {

    // your code here

});
于 2015-06-26T00:54:29.883 に答える
32

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

# Your controller, including $timeout

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

$timeout($scope.init)

それが役に立てば幸い。

于 2014-09-30T12:30:40.033 に答える
28

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

 $scope.$watch('$viewContentLoaded', function(){
    // do something
 });
于 2014-02-13T00:27:54.313 に答える
4

別の方法:

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

( https://stackoverflow.com/a/30258904/148412経由)

于 2015-06-17T08:25:56.987 に答える
3

私は同じ問題を抱えていましたが、この解決策だけがうまくいきました(完全なDOMがロードされた後に機能を実行します)。ページがロードされた後、アンカーへのスクロールにこれを使用します。

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

                        // Your function that runs after all DOM is loaded

                    });
于 2016-09-15T10:34:38.267 に答える
3

$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
 }
}
于 2015-01-23T17:32:23.763 に答える