How can i update $stateParams without reloading the ui-view? angular ui router

后端 未结 3 803
無奈伤痛
無奈伤痛 2020-12-15 17:02

Get the context, angular, ui-router, nothing special, a root view built with 3 named ui-views. so in index.html we have


  
相关标签:
3条回答
  • 2020-12-15 17:41

    You could use the following to go to a specific route without reloading the views:

    $state.go('.', {parm1: 1}, {notify: false});
    

    The last object literal represents the options which you can pass along to go. If you set notify to false, this will actually prevent the controllers from being reinitialized. The . at the beginning is the absolute state name or relative state path you wanna go to.

    The important thing is the notify though.

    0 讨论(0)
  • 2020-12-15 17:55

    I think that using "Dynamic params" is now a better solution:

    When dynamic is true, changes to the parameter value will not cause the state to be entered/exited. The resolves will not be re-fetched, nor will views be reloaded.

    $stateProvider.state('search', {
       url: '/search?city&startDate&endDate',
       templateUrl: 'some/url/template.html',  
       params: {
          city: {
             value: 'Boston',
             dynamic: true
          }
       }
     }
    

    and then:

    $state.go('.', {city: 'London'});
    

    https://ui-router.github.io/ng1/docs/latest/interfaces/params.paramdeclaration.html#dynamic https://github.com/angular-ui/ui-router/issues/2709

    0 讨论(0)
  • 2020-12-15 17:56

    Quoting @christopherthielen from https://github.com/angular-ui/ui-router/issues/1758#issuecomment-205060258:

    using notify: false is almost never a good idea, and is now deprecated. Use reloadOnSearch if you must.

    You can also try dynamic parameters in the 1.0 version (currently 1.0.0-alpha.3). In your state, configure a parameter as dynamic and implement the uiOnParamsChanged callback :

    .state('foo', {
      url: '/:fooId',
      params: { fooId: { dynamic: true } },
      controller: function() {
        this.uiOnParamsChanged = function(changedParams, $transition$) {
          // do something with the changed params
          // you can inspect $transition$ to see the what triggered the dynamic params change.
        }
      }
    });
    

    For a demo, have a look at this plunker: http://plnkr.co/edit/T2scUAq0ljnZhPqkIshB?p=preview

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