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

JAVASCRIPT / 글쓴이

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

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

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

컨트롤러에서 수신 foo및 bar값 :

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

});

답변

방법을 보여주는 예제 를 만들었습니다 . 업데이트 된 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]})">

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

답변

반드시 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)섹션을 참조하십시오.

답변

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

답변