2015-10-29 9 views
6

पर समारोह कॉल मैं सम्बंधित controllers के लिए रास्ते में करने के लिए $routeProvider उपयोग कर रहा हूँ मेरी क्षुधा के सभी पृष्ठों, लेकिन जब दो routes ही controllers का उपयोग (यानी/ब्लॉग &/ब्लॉग: आईडी) मैं कैसे एक अलग प्रारंभ कर सकते हैं वर्तमान route के आधार पर functionकोणीय मार्ग - लोड

तो यदि मार्ग/ब्लॉग है तो मैं रूट लोड पर $ scope.loadPosts() प्रारंभ करना चाहता हूं। यदि मार्ग है/ब्लॉग: आईडी मैं रूट लोड पर $ scope.loadPost ($ id) प्रारंभ करना चाहता हूं।

+0

आप की जाँच की थी इस एक 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>

कुछ अन्य विकल्प होगा::

  • है कि आप के अंदर एक प्रारंभ समारोह में पर एक स्विच कर सकता है सूचक किसी प्रकार का हल आप कुछ इस तरह कर सकता है नियंत्रक
  • यदि आप ब्लॉग मार्ग लोड कर रहे हैं, तो एक अपरिभाषित ऑब्जेक्ट को हल करें, यदि आप ब्लॉग लोड कर रहे हैं: आईडी मार्ग, उस रूट के लिए लोड होने वाली वास्तविक वस्तु को हल करें

उम्मीद है कि यह कोड आपको जो कुछ भी तय करेगा, उसके साथ सही रास्ते पर शुरू हो जाएगा।

संपादित यहाँ एक link to a plunker है, कोड स्निपेट अजीब तरह से रुक-रुक कर

+0

बहुत बढ़िया, यह पूरी तरह से काम करता है। मुझे संकल्प संपत्ति के बारे में पता नहीं था क्योंकि मैं अपेक्षाकृत नया हूं। धन्यवाद! – Polarize

+0

कोई समस्या नहीं, खुश मैं मदद कर सकता था! –

2

यह करने के लिए सरल तरीका अभिनय किया जाना है, इसी template में ng-init का उपयोग कर प्रकट होता है।

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"); 
    } 
}]); 

एचटीएमएल कोड:

<!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> 
संबंधित मुद्दे