Jak korzystać z aktualnych params URL w kątowym kontrolera

Question

Mam dynamiczne params wartość w adresie URL i chcę go pobrać i używać w kontrolerze gdy onload Ale nie mam pojęcia, jak radzić sobie z $route.current.params

powiedzmy I mają tego dostawcę trasach

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

Wtedy w moim kontrolera

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

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

}); 

Jeśli dostęp użytkownika foo/abcdefg Powinienem pokazać ab cdefg w konsoli, ale mam błąd. „Nie można odczytać własności«params»undefined”

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

Na przykład:

W ty app_route.js trzeba połączyć wzorzec URL do określonego kontrolera i szablonu służącą do wyświetlania dane teleadresowe:

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

W konkretnego kontrolera dodać logikę (tu wybrać dane przez bar): samo użyciem $ 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 

I w template.html, układ:

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

Nie zapomnij dodać NG-view na stronie indeksu, w którym chcesz wyświetlające dane teleadresowe, a ng-app = "mapApp" w znaczniku HTML.

Mam nadzieję, że pomoże ^^

aby uzyskać więcej informacji, zobacz: http://docs.angularjs.org/tutorial/step_07

Answer 3

Aby uzyskać dostęp do $ route.current.params ty oczywiście trzeba dołączyć moduł ngRoute który jest ładowany poprzez uwzględnienie dodatkowe skośne 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> 

może uzyskać dostęp do current.params onLoad tworząc funkcji init() lub routeChangeSuccess.

Zobacz poniższy kod i przykład roboczy na stronie 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>