0

Minha controller chama a factory Action e adiciona botões na página que estou carregando, veja a baixo a controller:

class AgenciesListController {
  /* @ngInject */
  constructor(Action) {
    this.action = Action;

    this.action.addButton({
      title: 'Nova Agência',
      state: 'agencies.new'
    });
  }
}

export default AgenciesListController;

A factory Action, simples, tem as funções de adicionar e pegar todos os botões adicionados:

const ActionFactory = () => {
  let buttons = [];

  return {
    addButton: (button) => buttons.push(button),
    getButtons: () => buttons
  };
};

export default ActionFactory;

Desejo que ao mudar de página, somente apresente os botões da página selecionada, se uma página não tiver botões em sua controller, nada deve ser apresentado.

O código acima trás um comportamento indesejado adicionando novos botões toda vez que a pagina é selecionada pelo menu.

Devo resetar o array buttons toda vez que mudar de página?

1 Resposta 1

0

A melhor solução e ainda com suporte a uma futura configuração é utilizando um Provider. Como estou utilizando ui-router, decidi colocar as configurações de botões dinâmico diretamente na criação da rota, veja um exemplo:

.state('agencies.list', {
  url: '/list',
  component: 'agenciesList',
  data: {
    action: {
      buttons: [{
        title: 'Nova Agência',
        state: 'agencies.new'
      }]
    }
  },
  resolve: {
    /* @ngInject */
    agencies: Api => Api.all('agencies').getList()
  }
})

A controller do componente ficou assim:

import { registerListenerOnce } from './action.utils.js';

class ActionController {
  /* @ngInject */
  constructor($action, $rootScope) {
    this.action = $action;
    this.scope = $rootScope;
  }

  $postLink() {
    const renderAction = () => {
      this.buttons = this.action.getButtons();
    };

    registerListenerOnce('ActionDirective.$viewContentLoaded', this.scope, '$viewContentLoaded', () => {
      renderAction();
    });

    renderAction();
  }
}

export default ActionController;

Criei uma classe utils onde tem os registros dos listeners:

let $registeredListeners = {};

const registerListenerOnce = (tag, $rootScope, event, fn) => {
  let deregisterListenerFn = $registeredListeners[tag];

  if (deregisterListenerFn !== undefined) {
    deregisterListenerFn();
  }

  deregisterListenerFn = $rootScope.$on(event, fn);
  $registeredListeners[tag] = deregisterListenerFn;
};

export {
  registerListenerOnce
};

E o mais importante, o provider:

class ActionProvider {
  /* @ngInject */
  $get($state) {
    return {
      getButtons: () => {
        let current = $state.$current;
        let buttons = null;

        if (current.data.action) {
          buttons = current.data.action.buttons;
        }

        return buttons;
      }
    };
  }
}

export default ActionProvider;

Espero ajudar outros desenvolvedores com essa solução.

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .