How to run a Function after entering the Controller in Angularjs?

Asked

Viewed 1,282 times

3

I have the following problem, I have more than one state of navigation in the angular that uses the same controller, so:

.state('app.estado-navegacao-1', {
  url: "/estado-navegacao-1",
  views: {
    'menuContent': {
      templateUrl: "templates/estado1.html",
      controller: 'EstadoNavegacaoCtrl',
      controllerAs: 'estado'
    }
  }
})

.state('app.estado-navegacao-2', {
  url: "/estado-navegacao-1",
  views: {
    'menuContent': {
      templateUrl: "templates/estado2.html",
      controller: 'EstadoNavegacaoCtrl',
      controllerAs: 'estado'
    }
  }
})

Well, I would like you to "execute" that state, enter the controller, execute the normal methods and a Function that varies according to the chosen browsing state.

My controller looks something like this:

angular.module('controllers.estadonavegacao', [])
    .controller('EstadoNavegacao', EstadoNavegacao);

function EstadoNavegacao() {

    var vm = this;
    vm.init = init;
    vm.funcao = funcao;
    vm.funcao2 = funcao2;

    //Executa Normal nas duas chamadas
    init();

    function init() {

    };

    function funcao() {
     //Quero executar após o estado de navegação 1   
    };

    function funcao2() {
     //Quero executar após o estado de navegação 2  
    };

};

Does anyone have any idea how to make it work that way?

  • 1

    In addition to the two answers, for the sake of code organization and maintenance, I suggest you do not use the same controller for more than one view. With simple functions no problem, but you can have good headaches when you have something more complex.

  • Yes, I had thought about it, but I use the controller to generate Charts, and each Function is a different Chart, but from the same controller. What changes is basically the query and the display form, making multiple extra controllers would be a much bigger coding job. I separated so: Shopping, Financial, etc...

2 answers

3

In addition to the above options, you can use resolve:

.state('app.estado-navegacao-1', {
    url: "/estado-navegacao-1",
    //...
    resolve: { 
        // os comandos desejados aqui dentro, por exemplo
        message: function(messageService){
            return messageService.getMessage();
        }
    }
})

And have available in controller:

app.controller("myController", function (message) {
    $scope.message = message;
});

Depending on your need, you have a solution.

2


You can use the service $Location to get the path that is running.

function EstadoNavegacao($location) {
  //...

  init();

  function init() {
    var path = $location.path();
    if (path === '/estado-navegacao-1')
      funcao();
    else
      funcao2();
  };
};

Or even, you can manipulate the scope of controller using the attribute data.

.state('app.estado-navegacao-1', {
  url: "/estado-navegacao-1",
  //...
  data: { estadoNavegaco: 1 }
})

.state('app.estado-navegacao-2', {
  url: "/estado-navegacao-1",
  //...
  data: { estadoNavegaco: 2 }
});

And access the property through the scope of the controller:

function EstadoNavegacao() {
  var controller = this;

  init();

  function init() {
    if (controller.estadoNavegacao === 1)
      funcao();
    else
      funcao2();
  };
};
  • 1

    You can also use the resolve, similar to the date.

  • Cool, I hadn’t thought of those possibilities, thanks anyway!!

  • It’s another great solution @Shura16. Post an example as an answer, the more content the better. :)

Browser other questions tagged

You are not signed in. Login or sign up in order to post.