web-dev-qa-db-ja.com

Angular：ng-initはロード時に実行されません

このng-initの問題に関するスタックオーバーフローの例をいくつか見ましたが、コントローラーを使用してそれを参照する例を見つけることができないようです。

私はhtmlファイルに次のようにすることでコントローラーの関数を呼び出しました

<div class="tab-container" ng-controller = "ExampleController" ng-init = "init()" >

コントローラで：

$scope.init = function(){

        alert("do something");
};

実行されますが、コンポーネントが画面にロードされる前に実行されます。

私は何かを逃していますか？

ありがとう

angularjscontrollerangularjs-ng-init
12
Anton Hughes

ng-initはデータの初期化に使用されるため、このように機能するはずです。

非常に単純な例：

<ul ng-init="list = [1,2,3,4]">
  <li ng-repeat="l in list"></li>
</ul>

コントローラのロード中にsomethingを実行しようとすると、実際には思ったよりもはるかに簡単です。

app.controller('mainCtrl', function ($scope) {

  var init = function ($scope) {
    // do whatever you need to do to initialize your controller
    $scope.someData = ["Hey", "I'm", "Alive"]
    $scope.otherData = localStorage.getItem('myBackup')
  }

  init()

})

または、関数が必要ない場合（クロージャーなどは必要ありません）、さらに簡単です。

app.controller('mainCtrl', function ($scope) {

  // do whatever you need to do to initialize your controller
  $scope.someData = ["Hey", "I'm", "Alive"]
  $scope.otherData = localStorage.getItem('myBackup')

})

編集-ngViewを使用していると仮定して：
ページが完全に読み込まれたときにコードを実行するには、イベントにウォッチャーを設定する必要があります$viewContentLoaded、 このような：

  $scope.$on('$viewContentLoaded', function(){
    //Here your view content is fully loaded !!
  });

app.controller('mainCtrl', function ($scope) {

  // This event is triggered when the view has finished loading
  $scope.$on('$viewContentLoaded', function() {

    $scope.someData = ["Hey", "I'm", "Alive"]
    $scope.otherData = localStorage.getItem('myBackup')      

  })    
})
15
domokun

別のオプションはjqueryを使用することです。あなたが多くの要素に依存しているなら、それは合います。ただし、プロジェクトに選択したバージョンのjqueryをロードしてください。 jqueryの読み込み（バージョンを挿入...）：

<script src="https://code.jquery.com/jquery-..."></script>

jsコード：

$(document).ready(function() { 
        alert("do something");
    });
0
haiatn