javascript - start - ui router change state

Cómo evitar que $ state específico se actualice cuando otras actualizaciones de $ state

Question

https://plnkr.co/edit/bOZW1a9u62W1QA6cYjYj?p=preview

Esperado

Después de iniciar sesión, todos los $ states se inicializan, luego de hacer clic en un botón Ticker, los únicos $ states que deberían reiniciarse son ticker , tags y social , pero no feed .

Resultados

Después del inicio de sesión, todos los $ states se inicializan, luego de hacer clic en un botón Ticker todos los $ states se reinicializan. La alimentación no debería.

¿Cómo deberían diseñarse el tablero y el módulo de alimentación para evitar esto? Por el momento tengo el <feed-module></feed-module> dentro del dashboard.html . ¿Debería el tablero y el tablero estar separados en otro estado / componente intermedio? Un container.component tal vez?

Código completo

// Feed module
////////////////////////////////////////////////////////////////////////////////
var feed = angular.module(''feed'', [''ui.router''])

feed.config(function($stateProvider) {

  const feed = {
    name: ''feed'',
    url: ''/feed'',
    templateUrl: ''<em>Feed items go here.</em>''
  }

  $stateProvider.state(feed);

})

feed.component(''feedModule'', {
  templateUrl: ''feed-module-template.html'',
  controller: function($scope, $state) {
    console.log(''Feed init (only once)'', $state.params);
  }
})

// RouterApp module
////////////////////////////////////////////////////////////////////////////////
var routerApp = angular.module(''routerApp'', [''ui.router'', ''feed'']);

routerApp.config(function($stateProvider, $urlRouterProvider) {

    $urlRouterProvider.otherwise(''/login'');

    const login = {
      name: ''login'',
      url: ''/login'',
      templateUrl: ''login.html'',
      bindToController: true,
      controllerAs: ''l'',
      controller: function($state) {
        this.login = function() {
          $state.go(''dashboard'', {});
        }
      }
    }

    const dashboard = {
      name: ''dashboard'',
      url: ''/dashboard'',
      params: {
        ticker: {},
        tags: {}
      },
      views: {
        '''' : {
          templateUrl: ''dashboard.html'',
        },
        ''tickers@dashboard'': {
          templateUrl: ''tickers-module-template.html'',
          controller: function($scope, $state) {
            console.log(''Tickers init'', $state.params);

            $scope.tickers = [
              { id: 1, ticker: ''AAPL'' },
              { id: 2, ticker: ''GOOG'' },
              { id: 3, ticker: ''TWTR'' }
            ];

            $scope.clickTicker = function(ticker) {
              console.log('' '')
              console.log(''Ticker clicked!'')
              $state.go(''dashboard'', { ticker: ticker });
            }
          }
        },
        ''tags@dashboard'' : {
          templateUrl: ''tags-module-template.html'',
          controller: function($scope, $state) {
            const tags_model = [
              {
                ticker: ''AAPL'',
                tags : [{ id: 1, term: ''iPhone 7'' }, { id: 2, term: ''iPhone 8'' }, { id: 3, term: ''Tim Cook'' }]
              },
              {
                ticker: ''GOOG'',
                tags : [{ id: 4, term: ''Pixel'' }, { id: 5, term: ''Pixel XL'' }, { id: 6, term: ''Chrome Book'' }]
              },
              {
                ticker: ''TWTR'',
                tags : [{ id: 7, term: ''tweet'' }, { id: 8, term: ''retweet'' }, { id: 9, term: ''moments'' }]
              }
            ];

            function matchTags(ticker, model) {
              return model.filter(function(obj){
                if (obj.ticker === ticker) { return obj; }
              });
            }

            $scope.tags_model = matchTags($state.params.ticker.ticker, tags_model)[0];

            $scope.clickTag = function(tag) {
              $state.go(''tags'', { tag: tag });
            }

            console.log(''Tags init'', $state.params);
            // console.log('' Tags model'', tags_model);
          }
        },
        ''social@dashboard'' : {
          templateUrl: ''social-module-template.html'', 
          controller: function($state) {
            console.log(''Social init'', $state.params);
          }
        }
      }
    }

    $stateProvider
      .state(login)
      .state(dashboard);
});

Pensamientos, ¿funcionaría una arquitectura como esta? Básicamente, el login se desplazaría a un estado de container que contendrá 2 componentes ( dashboard y feed ) cada uno con sus propios estados internos.

Answer 1

Podría resolver este problema dependiendo del estado del que vienes. En función del hecho de que solo quiere que el feed se cargue "una vez" cuando se carga el panel, estoy verificando el nombre del estado anterior, y si no está en el tablero, solo entonces continuaré con la ejecución del resto de el código del controlador. Aquí está el plunker. Tenga en cuenta que este enfoque no es muy escalable si se agregan más estados y si alguien más tiene un mejor enfoque, realmente me gustaría ver eso.

Cambié el código del controlador de la siguiente manera:

feed.component(''feedModule'', {
  templateUrl: ''feed-module-template.html'',
  controller: function($scope, $state) {
    var previousState = $state.params.previousState.name;
    if(previousState !== ''dashboard'') {
      console.log(''Feed init (only once)'', $state.params); //do whatever u want here
    }
  }
});

Estoy pasando por estado anterior como params a otros estados como este:

controller: function($state) {
  this.login = function() {
    $state.go(''dashboard'', {previousState : { name : $state.current.name }})
  }
}

¡Mire aquí el plunker completo para ver si esto ayuda a su caso!