2015-10-29 30 views
6

上の関数を呼び出して、私は相関controllersにルーティングする私のアプリのすべてのページを$routeProviderを使用していますが、2 routesが同じcontrollers(すなわち/ブログ& /ブログ:id)を使用してどのように私は別のを初期化することができます現在のrouteに応じてfunctionになります。アンギュラルート - 負荷

ルートが/ blogの場合、route loadで$ scope.loadPosts()を初期化します。 ルートが/ blog:idの場合、ルートloadで$ scope.loadPost($ id)を初期化します。

+0

あなたはこの1つをチェックしなかったhttp://stackoverflow.com/questions/16062434/angular-different-route-same-template-controller-different-loading-methodそれともあなたが望むものと違うのですか? –

答えて

4

ここではいくつかのことができますが、私の提案はルートの解決を通じて初期化関数を渡すことです。いくつかの他のオプションは以下のようになり

angular.module('test', ['ngRoute']) 
 
    .config(['$routeProvider', 
 
    function($routeProvider) { 
 
     $routeProvider 
 
     .when('/blog', { 
 
      controller: 'BlogController', 
 
      template: '<h1>Blog</h1>', 
 
      resolve: { 
 
      init: function() { 
 
       return function() { 
 
       console.log('Loading Blog'); 
 
       } 
 
      } 
 
      } 
 
     }) 
 
     .when('/blog/:id', { 
 
      controller: 'BlogController', 
 
      template: '<h1>Blog ID</h1>', 
 
      resolve: { 
 
      init: function() { 
 
       return function($route) { 
 
       console.log('Loading Blog Article ' + $route.current.params.id); 
 
       } 
 
      } 
 
      } 
 
     }); 
 
    } 
 
    ]) 
 
    .controller('BlogController', ['$scope', '$route', 'init', 
 
    function($scope, $route, init) { 
 
     init($route); 
 
    } 
 
    ]);
<!DOCTYPE html> 
 
<html ng-app="test"> 
 

 
<head> 
 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.7/angular.min.js"></script> 
 
    <script src="https://code.angularjs.org/1.4.6/angular-route.js"></script> 
 

 
</head> 
 

 
<body> 
 
    <a href="#/blog">Go to Blog</a> 
 
    <a href="#/blog/2">Go to Article 2</a> 
 

 
    <div ng-view></div> 
 
</body> 
 

 
</html>

  • を使用すると、内部の初期化関数でのスイッチを行うことができます指標のいくつかの並べ替えを解決するには、このような何かを行うことができますコントローラー
  • ブログルートを読み込んでいる場合、ブログ:idルートを読み込んでいる場合は、未定義のオブジェクトを解決し、そのルートにロードする実際のアイテムを解決します

このコードでは、あなたが決めるところで正しいトラックを開始することができればうれしいことです。

ここで編集link to a plunkerだ、コードスニペットはtemplateに対応するにng-initを使用して、断続的に

+0

素晴らしいですが、これは完全に機能します。私は比較的新しいので、私は解決プロパティについて知らなかった。ありがとう! – Polarize

+0

問題はありません。うれしいです! –

2

妙にこれを行うための簡単な方法をされて演技しているように見えます。

angular.module('demo', ['ngRoute']) 
.config(['$routeProvider', 
    function($routeProvider) { 
    $routeProvider 
    .when('/linkOne', { 
     controller: 'LinkController', 
     template: '<h1 ng-init="functionOne()">Hello world</h1>' 
    }) 
    .when('/linkTwo', { 
     controller: 'LinkController', 
     template: '<h1 ng-init="functionTwo()">Hello Stackoverflow</h1>' 
    }); 
}]) 
.controller('LinkController', ['$scope', function($scope) { 
    $scope.functionOne = function(){ 
    console.log("Hello"); 
    } 
    $scope.functionTwo = function(){ 
    console.log("Hello world"); 
    } 
}]); 

HTMLコード:

<!DOCTYPE html> 
    <html ng-app="demo"> 
    <head> 
     <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.7/angular.min.js"></script> 
     <script src="https://code.angularjs.org/1.4.6/angular-route.js"></script> 
    </head> 
    <body> 
     <a href="#linkOne">Link One</a> 
     <a href="#linkTwo">Link Two</a> 

     <div ng-view></div> 
    </body> 
    </html>