Angularjs 如何在angular controller中使用当前url参数

我在url中有一个动态值params，我想在onload时获取它并在控制器中使用 但是我不知道如何处理

$route.current.params

假设我有这个路由提供者

$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

假设应该在控制台中显示abcdefg，但我得到了错误。 '无法读取未定义'

的属性'params'，例如：

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

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

});

在app_route.js中，您必须将url模式链接到特定控制器和用于显示数据的模板：

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

函数mapCtrl（$scope、$routeParams、$http）{
$http.get（'./data/myDatas.json'）.success（函数（数据）{
var arr=新数组（）；
对于（变量i=0；i

在template.html中，布局：

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

{{item.bar}

别忘了在你的索引页面上添加ng视图，在那里你想显示数据，并在html标签中添加ng app=“mapApp”

我希望这对你有帮助^^

---

有关更多信息，请参阅：

要访问$route.current.params，您当然需要包含ngRoute模块，该模块通过包含附加的angular-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>

您可以通过创建init（）函数或使用routeChangeSuccess访问current.params onLoad

请参阅下面的代码和上的工作示例

var-app=angular.module（“myApp”，['ngRoute']）；
app.config（函数（$routeProvider）{
$routeProvider
.when（“/foo/：bar”{
控制器：“MainCtrl”，
templateUrl:'template.html'}
);
});
应用程序控制器（'MainCtrl'[
“$rootScope”、“$scope”、“$route”、“$routeParams”函数（$rootScope、$scope、$route、$routeParams）{
$scope.routeParams={}；
$scope.routeParams.bar=$routeParams.bar；
var init=函数（）{
$scope.initCurrentParams={}；
$scope.$route=$route；
$scope.initCurrentParams.bar=$scope.$route.current.params.bar；
log（'from init'，$scope.initCurrentParams.bar）；
};
init（）；
$scope.$on（“$routeChangeSuccess”，函数（）{
$scope.routeChangeSuccessCurrentParams={}；
$scope.$route=$route；
$scope.routeChangeSuccessCurrentParams.bar=$scope.$route.current.params.bar；
log（'from routeChangeSuccess'，$scope.routeChangeSuccessCurrentParams.bar）；
});
}]);
$routeParams.bar:{{routeParams.bar}}

initCurrentParams.bar:{{initCurrentParams.bar}}

routeChangeSuccessCurrentParams.bar:{{routeChangeSuccessCurrentParams.bar}}

你在$routeParams.bar中得到了什么？未定义，我想这是因为我在url栏中键入内容时访问url，而不使用触发器。如果我使用

{{$route.current.params.bar}

直接在视图中查看，然后它就会工作。最好设置一个plunker或fiddle演示程序，使您的代码能够工作，因为很难说为什么不工作working@vzhen检查参数名称，它应该与您在

$routeProvider

中声明的名称完全匹配。

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