2015-10-29 16 views
6

Sto usando $routeProvider di instradare tutte le mie pagine applicazioni alla correlazione controllers, ma quando due routes uso lo stesso controllers (cioè/blog &/blog: id) come posso inizializzare un separato function a seconda dell'attuale route.angolare percorso - la funzione di chiamata a carico

Quindi, se il percorso è/blog, desidero inizializzare $ scope.loadPosts() sul caricamento del percorso. Se il percorso è/blog: id Voglio inizializzare $ scope.loadPost ($ id) sul caricamento del percorso.

+0

hai controllare questo http://stackoverflow.com/questions/16062434/angular-different-route-same-template-controller-different-loading-method o è diverso da quello che vuoi? –

risposta

4

Qui potresti fare alcune cose, ma il mio suggerimento sarebbe di passare la funzione di inizializzazione attraverso la risoluzione del percorso. Si potrebbe fare qualcosa di simile:

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>

Alcune altre opzioni sarebbero:

  • risolvere alcune specie di indicatore che si potrebbe fare un interruttore on in una funzione di inizializzazione all'interno del controller
  • Se si sta caricando il percorso del blog, risolvere un oggetto non definito, se si sta caricando il blog: percorso ID, risolvere l'elemento effettivo che si desidera caricare per quella rotta

Speriamo che questo codice ti permetta di iniziare sulla strada giusta con qualsiasi cosa tu decida.

modificare Ecco un link to a plunker, il frammento di codice sembra agire in modo strano intermittenza

+0

Fantastico, funziona perfettamente. Non sapevo della proprietà della risoluzione perché sono relativamente nuova. Grazie! – Polarize

+0

Nessun problema, felice di poterti aiutare! –

2

Il modo più semplice per farlo è, utilizzando ng-init in corrispondenti template. Codice

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> 
Problemi correlati