Definieren Sie die onEnter- und OnExit-Rückrufe in einer anderen Datei mit Angular UI Router

Question

Ich habe eine einfache Anwendung mit Angular UI Router mit einigen Status.

Eigentlich habe ich diese Art von Code in meinem Router :

$stateProvider.state('map.layers', {
    url: '/layers',
    templateUrl: 'views/layers.html',
    controller: 'LayersCtrl',
    onEnter: function(map: Master.Map) {
      // do stuff
    },

    onExit: function(map: Master.Map) {
      // do stuff
    }
  });

Der Controller ist in einer anderen Datei definiert, und ich suche nach einer guten Möglichkeit, die onEnter- und OnExit-Rückrufe in derselben Datei zu definieren.

Was ist Ihrer Meinung nach die beste Lösung?Eine globale Variable sollte funktionieren, ist aber nicht sehr schön.

Answer 1

Sie können dies tun, aber ohne mehr zu wissen, ist dies ein Code-Geruch.Sie mischen Logik zwischen Controllern und Zuständen, aber sie sollten getrennt sein.

Wie auch immer, hier ist, wie Sie das tun können:

Injizieren Sie in Ihren Controller das $state objekt und verwenden Sie die $state.get Methode:

.controller('layersCtrl', function($state) {
  $state.get('map.layers').onEnter = blah;
  $state.get('map.layers').onExit = blahblah;
});

Stattdessen würde ich empfehlen, dass Sie diese gemeinsam genutzte Funktionalität in einen Dienst extrahieren.Wenn es Ihnen schwer fällt, dies zu tun, würde ich mir Ihren Code genau ansehen, da es zu viel Kopplung zwischen Modulen zu geben scheint.