Question

我正在尝试在Angular中进行基本路由。

我的配置看起来像

app.config(function($routeProvider, $locationProvider) {
  $locationProvider.html5Mode(true);

  $routeProvider.when('/', { 
    templateUrl: 'home.html', controller: 'loginCtrl' 
  }, 
  $routeProvider.when('/user_profile/, { 
     templateUrl: 'user_profile.html', controller: 'UserProfileCtrl'
  }
});

当我有一个转到user_profile的链接时，我无法获得$ route params。

<a href="user_profile/?user_id=9">Go To Profile</a>

控制器$route.params中是undefined。

我试图制作一个plnkr，但很明显我错过了一些基本的东西

编辑：$routeParams

我有一个模块可以从服务器获取用户信息。当我传入$routeParams时，它会设置为此。

<script type="text/javascript">
  angular.module('userFromServer', [])
    .service('currentUser', function() {
      <% if logged_in %>
        this.name = '<%= @User.name %>';
        this.id = '<%= @User.id %>'
      <% else %>
        this.name, this.id = '';
      <% end %>
    })
</script>

Answer 1

看看这个

您可以使用$routeParams获取路由参数

<强> Plunker (Non HTML5 Mode)

Plunker (HTML5 Mode)

app = angular.module('MyApp', ['ngRoute']);

app.config(function ($routeProvider, $locationProvider) {

  $routeProvider.when('/', { 
    templateUrl: 'home.html', 
    controller: 'loginCtrl' 
  })
  .when('/user_profile/:user_id', { 
     templateUrl: 'user_profile.html', 
     controller: 'UserProfileCtrl'
  });

});  

app.controller('loginCtrl', function($scope, $routeParams) {
  $scope.name = "Hello"
  console.log($routeParams); 
}); 

app.controller('UserProfileCtrl', function($scope, $routeParams) {
  $scope.name = "UserProfile"
  console.log($routeParams); 
});

Answer 2

你需要$ route作为控制器中的参数。

app.controller('myCtrl', function($route) {

Answer 3

尝试从

获取它

$routeParams.user_id

...假设您将它们注入控制器并且您的路线看起来像这样

$routeProvider.when('/user_profile/:user_id, { 
    templateUrl: 'user_profile.html', 
    controller: 'UserProfileCtrl'
}

Answer 4

我知道这很古老，但是也许我的解决方案仍然可以帮助人们。

如果您的HTML文档的head元素中包含title元素 $ Route无法正常工作。

而是在app.config函数中设置所有应用程序标题。

Answer 5

来自文档：

请注意，$ routeParams仅在路由更改成功完成后更新。这意味着您不能依赖路由解析函数中的$ routeParams正确。相反，您可以使用$ route.current.params来访问新路由的参数。

尝试获取当前参数时，$ route.current未定义

5 个答案: