2016-10-04 3 views
0

In Angular 1.5 und eckigen ui router, möchte ich das rücken taste verhalten meiner staaten zu erkennen, die namen der staaten und nicht die params als ich eine url/restaurant/1? param1 = wert & param2 = Wert, der sich dynamisch ändert, ohne die Seite zu aktualisieren. Ich habe die Bindung und die URL nicht geändert, wenn sich eine Eigenschaft ändert, aber wenn ich die Zurück-Schaltfläche drücke, geht es zum vorherigen Zustand der Parameter, nicht zum gespeicherten Zustand in $ rootScope nach Namen. Ich habe dies für Stunden debugged und meine aktuelle Lösung funktioniert nur manchmal, es ist nicht konsistent, weil die URL-Synchronisierung nicht immer rechtzeitig aufgerufen wird, damit der Status nicht aktualisiert wird, wenn die URL aktualisiert. Ich erkenne korrekt, wenn die Zurück-Schaltfläche gedrückt wird, aber es aktualisiert den Status nicht. Im Moment muss ich eine location.assign verwenden und es funktioniert nur zeitweise. Gibt es überhaupt Resynchronisierung der DeferIntercept in eckigen Router?

function bind(propGetters, 
 
    getUrl) { 
 
    let unwatch = this._$rootScope.$watchGroup(propGetters,() => { 
 
    let trimmedUrl = getUrl(); 
 
    let remove = this._$rootScope.$on('$locationChangeSuccess',() => { 
 
     this._$rootScope.disableBackButton = false; 
 
     remove(); 
 
    }); 
 

 
    this._$rootScope.disableBackButton = true; 
 
    if (!this._$rootScope._hitBackButton) { 
 
     this._$rootScope.shouldSync = false; 
 
     this._$location.url(trimmedUrl); 
 
    } 
 
    }); 
 

 
    return { 
 
    unbind(): void { 
 
     unwatch(); 
 
    } 
 
    }; 
 
    module.run(
 
    ($urlRouter, $rootScope) => { 
 
     $rootScope.shouldSync = true; 
 

 
     $rootScope.$on('$locationChangeSuccess', e => { 
 
     if ($rootScope.shouldSync) { 
 
      $urlRouter.sync(); 
 
     } else if (!$rootScope._hitBackButton) { 
 
      e.preventDefault(); 
 
     } 
 
     $rootScope.shouldSync = true; 
 
     }); 
 

 
     $rootScope.$on("$stateChangeSuccess", (event, toState, toParams, fromState, fromParams) => { 
 
     if ($rootScope.previousState) { 
 
      if ($rootScope.previousState.name !== fromState.name && !$rootScope.disableBackButton) { 
 
      $rootScope.previousState = lodash.merge(fromState, { params: fromParams }); 
 
      console.log($rootScope.previousState.name, 'previousState'); 
 
      } 
 
     } else { 
 
      this._$rootScope.previousState = lodash.merge(fromState, { params: fromParams }); 
 
     } 
 
     }); 
 

 
     $rootScope.$on('$locationChangeSuccess', (evt, newUrl, oldUrl) => { 
 
     $rootScope.actualPrevious = oldUrl; 
 
     if ($rootScope._hitBackButton) { 
 
      this._urlProvider.sync(); 
 
      $rootScope._hitBackButton = false; 
 
     } 
 
     }); 
 
     $rootScope.$on('$locationChangeStart', (evt, newUrl, oldUrl) => { 
 
     if ($rootScope.actualPrevious === newUrl && $rootScope.previousState && !$rootScope.disableBackButton && !$rootScope._hitBackButton) { 
 
      $rootScope.shouldSync = true; 
 
      event.preventDefault(); 
 
      console.log('hit back', $rootScope.previousState.name); 
 
      $rootScope._hitBackButton = true; 
 
      window.location.assign(this._urlService.getFullPath(this._$state.href($rootScope.previousState.name, $rootScope.previousState.params))) 
 
      // this._$state.go($rootScope.previousState.name, $rootScope.previousState.params, { reload: true }); - this doesn't seem to always work because of watch collisions? 
 
     } 
 
     }); 
 
     $urlRouter.listen(); 
 
    });

+0

Ich benutze 'module.config (($ urlRouterProvider: Die Zurück-Taste sollte mit meiner Lösung über minus der deferIntercept und plus der reloadOnSearch funktionieren angular.ui.IUrlRouterProvider) => { $ urlRouterProvider.deferIntercept(); }); ' auf config – evanjmg

+0

* Ich würde vorschlagen: Nehmen Sie sich Zeit, um einen Plünderer zu erstellen. Es würde nicht nur ein größeres Publikum erreichen und die Chance erhöhen, Hilfe zu bekommen, sondern es könnte auch helfen, die Lösung selbst zu finden * –

Antwort

0

Nach ca. Stunden für 5 Spielen, fand ich es am besten reloadOnSearch mit deferIntercept alle zusammen und stattdessen zu vermeiden: false wie

so

$stateProvider.state('app.restaurant', { url: '/restaurant/{slug}?param1&param2&param3', resolve: { param1: function 1, param2: function 2, param3: function 3 }, reloadOnSearch: false, params: { slug: { value: null }, }, controller: 'restaurantController', template: }); Hinweis werden Sie muss deferIntercept für Schrägstriche anstelle von Parametern verwenden. Ich würde dringend empfehlen, params zu verwenden, wenn sich Ihre URL ändert. falsch

0
Full modified implementation: 

this._$rootScope.$on('$locationChangeStart', (evt, newUrl, oldUrl) => { 
 
     if (this._$rootScope.actualPrevious === newUrl && this._$rootScope.previousState && !this._$rootScope._hitBackButton) { 
 
     evt.preventDefault(); 
 
     this._$rootScope._hitBackButton = true; 
 
     this._$state.go(this._$rootScope.previousState.name, this._$rootScope.previousState.params); 
 
     } 
 
    }); 
 
    this._$rootScope.$on("$stateChangeSuccess", (event, toState, toParams, fromState, fromParams) => { 
 
     if (this._$rootScope.previousState) { 
 
     if (this._$rootScope.previousState.name !== fromState.name) { 
 
      this._$rootScope.previousState = lodash.merge(fromState, { params: fromParams }); 
 
     } 
 
     } else { 
 
     this._$rootScope.previousState = lodash.merge(fromState, { params: fromParams }); 
 
     } 
 
    }); 
 
    this._$rootScope.$on('$locationChangeSuccess', (evt, newUrl, oldUrl) => { 
 
     this._$rootScope.actualPrevious = oldUrl; 
 
     if (this._$rootScope._hitBackButton) { 
 
     this._$rootScope._hitBackButton = false; 
 
     } 
 
    });