URL 없이 상태 간에 데이터를 전달하는 AngularJS UI 라우터

URL 없이 상태 간에 데이터를 전달하는 AngularJS UI 라우터

url내의 데이터를 공개하지 않고, 2개의 스테이트간에 데이터를 건네주는 문제에 직면하고 있습니다.사용자가 직접 이 스테이트에 액세스 할 수 없는 것과 같습니다.

예를들면.저는 "A"와 "B"의 두 개의 주가 있습니다.상태 "A"에서 서버 콜을 실행하고 콜 응답을 상태 "B"로 전달합니다.서버 콜의 응답은 문자열 메시지이며, 상당히 길기 때문에 URL에 표시할 수 없습니다.

따라서 url 파라미터를 사용하지 않고 angular ui 라우터에서 상태 간에 데이터를 전달할 수 있는 방법이 있습니까?

사용할 수 있습니다.paramsUI 라우터의 새로운 기능:

API 레퍼런스 / ui.router.state / $stateProvider

params임의로 URL에서 선언된 파라미터를 설정하거나 추가 비url 파라미터를 정의하는 맵.설정되는 각 파라미터에 대해 파라미터 이름에 키를 가진 Configuration오브젝트를 추가합니다.

파트 "...또는 기타 비 URL 파라미터를 정의합니다.."

따라서 주정부의 방어는 다음과 같습니다.

$stateProvider
  .state('home', {
    url: "/home",
    templateUrl: 'tpl.html',
    params: { hiddenOne: null, }
  })

위에서 설명한 문서의 예는 거의 없습니다.

// define a parameter's default value
params: {
  param1: { value: "defaultValue" }
}
// shorthand default values
params: {
  param1: "defaultValue",
  param2: "param2Default"
}

// param will be array []
params: {
  param1: { array: true }
}

// handling the default value in url:
params: {
  param1: {
    value: "defaultId",
    squash: true
} }
// squash "defaultValue" to "~"
params: {
  param1: {
    value: "defaultValue",
    squash: "~"
  } }

EXTEND - 작업 예: http://plnkr.co/edit/inFhDmP42AQyeUBmyIVl?p=info

상태 정의의 예를 다음에 나타냅니다.

 $stateProvider
  .state('home', {
      url: "/home",
      params : { veryLongParamHome: null, },
      ...
  })
  .state('parent', {
      url: "/parent",
      params : { veryLongParamParent: null, },
      ...
  })
  .state('parent.child', { 
      url: "/child",
      params : { veryLongParamChild: null, },
      ...
  })

이는 ui-sref를 사용한 콜일 수 있습니다.

<a ui-sref="home({veryLongParamHome:'Home--f8d218ae-d998-4aa4-94ee-f27144a21238'
  })">home</a>

<a ui-sref="parent({ 
    veryLongParamParent:'Parent--2852f22c-dc85-41af-9064-d365bc4fc822'
  })">parent</a>

<a ui-sref="parent.child({
    veryLongParamParent:'Parent--0b2a585f-fcef-4462-b656-544e4575fca5',  
    veryLongParamChild:'Child--f8d218ae-d998-4aa4-94ee-f27144a61238'
  })">parent.child</a>

여기서 예를 확인하세요.

params 객체는 $stateParams에 포함되지만 URL에는 포함되지 않습니다.

1) 루트 설정에서:

$stateProvider.state('edit_user', {
    url: '/users/:user_id/edit',
    templateUrl: 'views/editUser.html',
    controller: 'editUserCtrl',
    params: {
        paramOne: { objectProperty: "defaultValueOne" },  //default value
        paramTwo: "defaultValueTwo"
    }
});

2) 컨트롤러 내:

.controller('editUserCtrl', function ($stateParams, $scope) {       
    $scope.paramOne = $stateParams.paramOne;
    $scope.paramTwo = $stateParams.paramTwo;
});

3A) 컨트롤러에서 상태 변경

$state.go("edit_user", {
    user_id: 1,                
    paramOne: { objectProperty: "test_not_default1" },
    paramTwo: "from controller"
});

3B) html에서의 상태 변경

<div ui-sref="edit_user({ user_id: 3, paramOne: { objectProperty: 'from_html1' }, paramTwo: 'fromhtml2' })"></div>

예: 플런커

언급URL : https://stackoverflow.com/questions/28248236/angularjs-ui-router-passing-data-between-states-without-url