Cách truyền tham số bằng cách sử dụng ui-sref trong ui-router để điều khiển

Tôi cần phải vượt qua và nhận hai tham số về trạng thái tôi muốn chuyển sang sử dụng ui-srefui-router.

Một cái gì đó như sử dụng các liên kết dưới đây để chuyển trạng thái để homecó foovà barcác thông số:

<a ui-sref="home({foo: 'fooVal', bar: 'barVal'})">Go to home state with foo and bar parameters </a>

Nhận foovà bargiá trị trong bộ điều khiển:

app.controller('SomeController', function($scope, $stateParam) {
  //..
  var foo = $stateParam.foo; //getting fooVal
  var bar = $stateParam.bar; //getting barVal
  //..
});     

Tôi nhận được undefinedcho $stateParamtrong bộ điều khiển.

Ai đó có thể giúp tôi hiểu làm thế nào để hoàn thành nó?

Biên tập:

.state('home', {
  url: '/',
  views: {
    '': {
      templateUrl: 'home.html',
      controller: 'MainRootCtrl'

    },

    'A@home': {
      templateUrl: 'a.html',
      controller: 'MainCtrl'
    },

    'B@home': {
      templateUrl: 'b.html',
      controller: 'SomeController'
    }
  }

});

Tôi đã tạo một ví dụ để chỉ ra cách làm. stateĐịnh nghĩa cập nhật sẽ là:

  $stateProvider
    .state('home', {
      url: '/:foo?bar',
      views: {
        '': {
          templateUrl: 'tpl.home.html',
          controller: 'MainRootCtrl'

        },
        ...
      }

Và đây sẽ là bộ điều khiển:

.controller('MainRootCtrl', function($scope, $state, $stateParams) {
    //..
    var foo = $stateParams.foo; //getting fooVal
    var bar = $stateParams.bar; //getting barVal
    //..
    $scope.state = $state.current
    $scope.params = $stateParams; 
})

Những gì chúng ta có thể thấy là nhà nước hiện có url được định nghĩa là:

url: '/:foo?bar',

có nghĩa là, các thông số trong url được mong đợi là

/fooVal?bar=barValue

Hai liên kết này sẽ chuyển chính xác các đối số vào bộ điều khiển:

<a ui-sref="home({foo: 'fooVal1', bar: 'barVal1'})">
<a ui-sref="home({foo: 'fooVal2', bar: 'barVal2'})">

Ngoài ra, bộ điều khiển không tiêu thụ $stateParamsthay vì $stateParam.

Liên kết đến tài liệu:

• Tham số URL

Bạn có thể kiểm tra nó ở đây

params : {}

Ngoài ra còn có thiết lập mới , chi tiết hơn params : {}. Như chúng ta đã thấy, chúng ta có thể khai báo các tham số như là một phần của url. Nhưng với params : {}cấu hình - chúng tôi có thể mở rộng định nghĩa này hoặc thậm chí giới thiệu các tham số không phải là một phần của url:

.state('other', {
    url: '/other/:foo?bar',
    params: { 
        // here we define default value for foo
        // we also set squash to false, to force injecting
        // even the default value into url
        foo: {
          value: 'defaultValue',
          squash: false,
        },
        // this parameter is now array
        // we can pass more items, and expect them as []
        bar : { 
          array : true,
        },
        // this param is not part of url
        // it could be passed with $state.go or ui-sref 
        hiddenParam: 'YES',
      },
    ...

Các cài đặt khả dụng cho thông số được mô tả trong tài liệu của $ stateProvider

Dưới đây chỉ là một trích xuất

• value - {object | function =} : chỉ định giá trị mặc định cho tham số này. Điều này ngầm đặt tham số này là tùy chọn ...
• mảng - {boolean =}: (default: false) Nếu đúng, giá trị param sẽ được coi là một mảng các giá trị.
• bí đao - {bool | chuỗi =}: squash định cấu hình cách một giá trị tham số mặc định được biểu thị trong URL khi giá trị tham số hiện tại giống với giá trị mặc định.

Chúng ta có thể gọi những thông số này theo cách này:

// hidden param cannot be passed via url
<a href="#/other/fooVal?bar=1&amp;bar=2">
// default foo is skipped
<a ui-sref="other({bar: [4,5]})">

Kiểm tra nó trong hành động ở đây

Bạn không nhất thiết phải có các tham số bên trong URL.

Chẳng hạn, với:

$stateProvider
.state('home', {
  url: '/',
  views: {
    '': {
      templateUrl: 'home.html',
      controller: 'MainRootCtrl'

    },
  },
  params: {
    foo: null,
    bar: null
  }
})

Bạn sẽ có thể gửi tham số đến trạng thái, bằng cách sử dụng:

$state.go('home', {foo: true, bar: 1});
// or
<a ui-sref="home({foo: true, bar: 1})">Go!</a>

Tất nhiên, nếu bạn tải lại trang một lần trên hometrạng thái, bạn sẽ mất các tham số trạng thái, vì chúng không được lưu trữ ở bất cứ đâu.

Một mô tả đầy đủ về hành vi này được ghi lại ở đây , dưới paramshàng trong state(name, stateConfig)phần.

Bạn chỉ cần viết sai chính tả $stateParam, nó phải là $stateParams(với một s). Đó là lý do tại sao bạn không xác định được;)