ui-router의 ui-sref를 사용하여 매개 변수를 컨트롤러에 전달하는 방법


369

ui-srefui-router 를 사용하여 전달하려는 상태로 두 개의 매개 변수를 전달하고 받아야 합니다.

상태를 homewith foobarparameters 로 전환하기 위해 아래 링크를 사용하는 것과 같은 것 :

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

컨트롤러에서 수신 foobar값 :

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

나는 수 undefined에 대한 $stateParam컨트롤러입니다.

누군가 내가 그것을 수행하는 방법을 이해하도록 도울 수 있습니까?

편집하다:

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

    },

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

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

});

5
경로에 설정해야합니다. 예 : – url:'.../home/:foo/:bar
PSL

@ PSL : 여기에 작은 예를 들어 주시겠습니까? 감사.
건너 뛰기

@ PSL : PSL 덕분에 컨트롤러에서 값을 가진 매개 변수를 가질 수있는 다른 방법이 있습니까?
건너 뛰십시오

1
수행 '/:foo/:bar': {하여 빈 경로 또는 당신은뿐만 아니라 쿼리 문자열로 설정할 수 있습니다.
PSL

답변:


531

방법을 보여주는 예제 를 만들었습니다 . 업데이트 된 state정의는 다음과 같습니다.

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

        },
        ...
      }

그리고 이것은 컨트롤러입니다.

.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; 
})

우리가 볼 수있는 것은 현재 주정부의 URL이

url: '/:foo?bar',

즉, URL의 매개 변수는 다음과 같이 예상됩니다.

/fooVal?bar=barValue

이 두 링크는 ​​인수를 컨트롤러에 올바르게 전달합니다.

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

또한 컨트롤러는 소비합니다 $stateParams 대신에 합니다 $stateParam.

문서 링크 :

여기서 확인할 수 있습니다

params : {}

또한이 새로운 , 더 세부적인 설정은 params : {}. 이미 살펴본 것처럼 매개 변수를의 일부로 선언 할 수 있습니다 url. 그러나 params : {}구성을 통해이 정의를 확장하거나 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',
      },
    ...

매개 변수에 사용할 수있는 설정은 $ stateProvider

아래는 단지 추출물입니다

  • 값-{object | function =} :이 매개 변수의 기본값을 지정합니다. 이것은 내재적으로이 매개 변수를 선택 사항으로 설정합니다.
  • 배열-{boolean =} : (기본값 : false) true 인 경우 param 값은 값의 배열로 처리됩니다.
  • 스쿼시-{bool | string =} : squash는 현재 매개 변수 값이 기본값과 같은 경우 기본 매개 변수 값이 URL에 표시되는 방식을 구성합니다.

이러한 매개 변수를 다음과 같이 호출 할 수 있습니다.

// 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]})">

작동 중인지 확인 하십시오.


1
좋은 대답이지만 <a ui-sref="profile.dashboard({aintUserId : [{{ibusUser.icdoUser.idoUser.userId}}] })"> 이와 같은 작업을 수행하려는 경우 어떻게됩니까? 작동 시키려면 어떻게해야합니까?
Fahad Mullaji 2016 년

@Radim, stackoverflow.com/questions/41429784/…를 살펴보고 조금 도와주세요
user203687

1
이것은 정말로 도움이되었다! 이것을 게시 해 주셔서 감사합니다.
Shoukat Mirza

1
좋은 답변, 정말 도움이됩니다. 감사 !
Venkat

다음과 같은 URL을 가질 수도 있습니다.url: "/:id?foo&bar"
Chicken Soup

107

반드시 URL 안에 매개 변수를 가질 필요는 없습니다.

예를 들어,

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

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

다음 중 하나를 사용하여 매개 변수를 상태로 보낼 수 있습니다.

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

물론 home상태 에서 페이지를 한 번 다시로드 하면 상태 매개 변수가 어디에도 저장되지 않으므로 느슨하게됩니다.

이 동작에 대한 자세한 설명이 설명되어 있습니다 여기에 세 이하, params에서 행 state(name, stateConfig)섹션을 참조하십시오.


params 속성은 나를 위해 아주 잘 작동했습니다 !!!!!! 감사!! 당신은 Google 전문가입니다
Lucas

30

당신은 단순히 철자를 잘못 입력 $stateParam했습니다 $stateParams. 그것이 정의되지 않은 이유입니다.)


9
일반적으로 이것은 질문에 주석으로 가야합니다. 그러나 어쨌든 질문을 읽고 문제를 이해하기 위해 노력한 결과 +1 :
Anmol Saraf
당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.