AngularJS ui router passing data between states without URL

前端 未结 2 618
死守一世寂寞
死守一世寂寞 2020-11-22 12:05

I am facing this problem of passing data between two states without exposing the data in the url, it\'s like user cannot really directly land on this state.

For exam

相关标签:
2条回答
  • 2020-11-22 12:26

    The params object is included in $stateParams, but won't be part of the url.

    1) In the route configuration:

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

    2) In the controller:

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

    3A) Changing the State from a controller

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

    3B) Changing the State in html

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

    Example Plunker

    0 讨论(0)
  • 2020-11-22 12:46

    We can use params, new feature of the UI-Router:

    API Reference / ui.router.state / $stateProvider

    params A map which optionally configures parameters declared in the url, or defines additional non-url parameters. For each parameter being configured, add a configuration object keyed to the name of the parameter.

    See the part: "...or defines additional non-url parameters..."

    So the state def would be:

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

    Few examples form the doc mentioned above:

    // 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 - working example: http://plnkr.co/edit/inFhDmP42AQyeUBmyIVl?p=info

    Here is an example of a state definition:

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

    This could be a call using 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>
    

    Check the example here

    0 讨论(0)
提交回复
热议问题