2016-04-22 12 views
0

私はangularjsを学習しています。私はそれを理解するのに苦労しています。Angularjs:ルーティング後にコントローラ機能を呼び出す方法

以下のコードの私の希望/期待される動作は次のとおりです。

  • ユーザーはrouteProviderはNG-ビューにparis.htmlページをロードし、要求をインターセプトパリリンク(アンカータグ)
  • をクリック。
  • コントローラの 'getCity'関数は、データを取得し、london.html式に表示されるスコープ変数を設定します。

しかし、HTMLページがng-viewに読み込まれたときに 'getCity'関数を使用するようにangularjsを設定する方法がわかりません。私が得ることができる最も近いのは、CityController内から 'getCity'関数を呼び出すことです。これは、リンクがクリックされたときだけでなく、アプリケーション全体(index.html)が読み込まれるときに関数を呼び出すという望ましくない影響を与えるようです。コントローラーにはさまざまな機能があります。

ng-clickを使用してコントローラの機能を呼び出すこともできますが、ルートプロバイダを介してng-viewにHTMLページを読み込む方法がわかりません。

ご協力いただければ幸いです。学習の目的のために構築された小さなアプリから以下のコードを参照してください。

index.htmlを

<!DOCTYPE html> 
<html ng-app="mainApp"> 
<head> 
<meta charset="ISO-8859-1"> 
<title>Insert title here</title> 


<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.8/angular-route.js"></script> 


</head> 
<body> 


     <ol> 

      <li><a href="#/cities/paris">Paris</a></li> 

     </ol> 


     <div class="content-wrapper" ng-controller="CityController"> 
      <div ng-view></div> 
     </div> 


     <script src="resources/js/app.js"></script> 

     <script src="resources/js/CityController.js"></script> 

</body> 
</html> 

app.js

var app = angular.module("mainApp", [ 'ngRoute' ]); 

app.config([ '$routeProvider', function($routeProvider) { 

    $routeProvider. 

    when('/cities/paris', { 
     templateUrl : 'resources/paris.html', 
     controller : 'CityController' 
    }). 


    otherwise({ 
     redirectTo : '' 

    }); 


} ]); 

CityController.js

app.controller('CityController', function($scope, $http) { 

    $scope.getCity = function() { 

     $http.get('city') 
     .success(function(response) { 
      $scope.name = response.name; 
      $scope.country = response.country; 
     }).error(function() { 
      //Output error to console 
     }); 

    }; 

    //$scope.getCity(); 

}); 

それはindex.htmlには、あなたが

paris.html

This is Paris. 
<br><br><br> 
Name: {{name}}<br> 
Country: {{country}} 
<br><br><br> 

答えて

0

にロードされたときにHTTP GETリクエスト に「街のエンドポイントが呼び出されることを意味するので、私はここにgetCityを呼び出すにしたくありませんng-init = getCity()を使用してparis.htmlからgetCity()を呼び出すことができます。ng-initは、paris.htmlがng-viewにロードされるとすぐに関数を呼び出します。例えば、

This is Paris. 
<br><br><br> 
<div ng-init=getCity() > 
    Name: {{name}}<br> 
    Country: {{country}} 
</div> 
<br><br><br> 
1

あなたが探しているのはルータresolveオプションです。

解決には、ルートが変更される前に正常に解決する必要がある1つ以上の約束が含まれています。これは、ビューを表示する前にデータが使用可能になるのを待つことができ、コントローラ内のモデルの初期化を単純化するため、コントローラの代わりにコントローラに初期データが渡され、データをフェッチする必要があるからです。

説明と使用here

をチェック
関連する問題