कैसे कोणीय नियंत्रक

Question

में वर्तमान url पैरामीटर का उपयोग करने के मैं यूआरएल में एक गतिशील मूल्य पैरामीटर है और मैं इसे पाने के लिए और जब ऑनलोड नियंत्रक में उपयोग करना चाहते हैं लेकिन मैं पता नहीं के साथ $route.current.params

Let कैसे निपटा जाए है मैं कहता हूँ मेरी नियंत्रक में इस मार्ग प्रदाता

$routeProvider.when('foo/:bar', {templateUrl: 'template.html'}; 

तो है

app.controller('mapCtrl', function($scope, $route, $routeParams) { 

    var param = $route.current.params.bar; 
    console.log(param); 

}); 

तो उपयोगकर्ता पहुँच foo/abcdefg मान लीजिए अब दिखाना चाहिए कंसोल में cdefg लेकिन मुझे त्रुटि मिली। 'अपरिभाषित की' परम 'संपत्ति पढ़ा नहीं जा सकता'

Answer 1

$routeProvider.when('foo/:bar', {templateUrl: 'template.html', controller: 'mapCtrl'}; 
app.controller('mapCtrl', function($scope, $route, $routeParams) { 

    var param = $routeParams.bar 
    console.log(param); 

}); 

Answer 2

उदाहरण के लिए:

आप में app_route.js आप एक विशिष्ट नियंत्रक और प्रदर्शित datas के लिए उपयोग करने के लिए टेम्पलेट के लिए यूआरएल ढांचा से जोड़ने के लिए है:

angular.module('mapApp', []). 
    config(['$routeProvider', function($routeProvider){ 
       $routeProvider.when('/foo/:bar', {templateUrl: './view/partial/template.html', controller: mapCtrl}); 
       $routeProvider.otherwise({redirectTo: '/foo/01'}); 
      } 
      ]); 

अपने विशिष्ट नियंत्रक में आप तर्क (बार से यहां का चयन डेटा) जोड़ें: ही $ के लिए routeParams का उपयोग कर & $ route.current.params

function mapCtrl($scope, $routeParams, $http) { 
    $http.get('./data/myDatas.json').success(function(data){ 
             var arr = new Array(); 
             for(var i=0; i < data.length; i++){ 
              if(data[i].bar == $routeParams.bar){ 
               arr.push(data[i]);        } 
              } 
             $scope.items = arr; 
             }); 
} 
mapCtrl.$inject = ['$scope', '$routeParams', '$http']; //for minified bug issue 

और अपने template.html में, लेआउट:

<div ng-repeat="item in items"> 
    <h3>{{item.bar}}</h3> 
</div> 

भूलना अपने सूचकांक पृष्ठ है जहाँ आप प्रदर्शित datas चाहते पर एनजी-व्यू न जोड़ें, और एनजी-ऐप = "mapApp" एचटीएमएल टैग में।

मुझे आशा है कि आप

^^ अधिक जानकारियां के लिए मदद मिलेगी, देखें: http://docs.angularjs.org/tutorial/step_07

Answer 3

$ route.current.params निश्चित रूप से आप ngRoute मॉड्यूल जो शामिल करके भरी हुई है शामिल करने की जरूरत तक पहुंचने के लिए अतिरिक्त कोणीय route.js

<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.0-rc.0/angular.min.js"></script> 
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.0-rc.0/angular-route.js"></script> 

आप current.params एक init() फ़ंक्शन बनाने के द्वारा या routeChangeSuccess साथ ऑनलोड पहुँच सकते हैं।

नीचे दिए गए कोड और jsfiddle पर कार्य उदाहरण देखें।

<script type="text/javascript"> 

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

app.config(function ($routeProvider) { 
    $routeProvider 
    .when('/foo/:bar', { 
     controller: 'MainCtrl', 
     templateUrl: 'template.html' } 
); 
}); 

app.controller('MainCtrl', [ 
    '$rootScope', '$scope', '$route', '$routeParams', function($rootScope, $scope, $route, $routeParams){ 

    $scope.routeParams = {}; 
    $scope.routeParams.bar = $routeParams.bar; 

    var init = function() { 
     $scope.initCurrentParams = {}; 
     $scope.$route = $route; 
     $scope.initCurrentParams.bar = $scope.$route.current.params.bar; 
     console.log('from init', $scope.initCurrentParams.bar); 
    }; 
    init(); 

    $scope.$on('$routeChangeSuccess', function() { 

     $scope.routeChangeSuccessCurrentParams = {}; 
     $scope.$route = $route; 
     $scope.routeChangeSuccessCurrentParams.bar = $scope.$route.current.params.bar; 
     console.log('from routeChangeSuccess', $scope.routeChangeSuccessCurrentParams.bar); 
    }); 
}]); 

</script> 

<div ng-app="myApp" class="ng-scope"> 
    <script type="text/ng-template" id="template.html"> 
     $routeParams.bar: {{ routeParams.bar }} <br /> 
     initCurrentParams.bar: {{ initCurrentParams.bar }} <br /> 
     routeChangeSuccessCurrentParams.bar: {{ routeChangeSuccessCurrentParams.bar }} <br /> 
    </script> 

    <div class="ng-scope"> 
     <ul> 
      <li><a href="#/foo/1">bar 1</a></li> 
     </ul> 
     <ng-view></ng-view> 
    </div> 
    </div>