Switch from view to controller (Ng-Click)

Question

I’m using ng-route to develop a single page application with Angularjs+Laravel. I’m having a problem with the switching view part through ng-click and the controller. I have a button in a view, and I would like when it was clicked it redirects to another view, taking an information (id).

This is my archive of angular routes. I want to redirect from the Manage Contributors page to the New Contributor page.

angular.module('registrosGerais')
			.config(function($routeProvider) {
		      $routeProvider
		      .when('/', {
		          templateUrl: 'views/index.html',
		          controller: ''
		        })
		        .when('/colaboradores', {
		          templateUrl: 'views/colaboradores/gerenciarcolaboradores.html',
		          controller: 'colaboradoresController'
		        })
		        .when('/colaboradores/novocolaborador', {
		          templateUrl: 'views/colaboradores/novocolaborador.html',
		          controller: 'colaboradoresController'
		        })
		        .otherwise({
		          redirectTo: '/colaboradores'
		        });
		    });

This is the button that should be clicked to redirect the new view.

<button id="btn-add" class="btn btn-primary btn-xs"
        ng-click="toggle('add', 0, '/#/colaboradores/novocolaborador')">Novo Colaborador</button>

This is my controller.

app.controller('colaboradoresController', function($scope, $http, API_URL) {
    
    $http.get(API_URL + "colaboradores")
            .success(function(response) {
                $scope.tbcolaborador = response;
            });

    $scope.toggle = function(modalstate, id, $location) {
        $scope.modalstate = modalstate;

        $location.path('/#/colaboradores/novocolaborador');
}

The view exchange should be done taking information (0 if adding a new one) and id if it is an existing contributor. Thanks for your help.

Answer 1

Since the controller is dropped when changing route, one way is to prepare your config router to receive the id parameter in the url itself.

.when('/colaboradores/novocolaborador/:id', {
              templateUrl: 'views/colaboradores/novocolaborador.html',
              controller: 'colaboradoresController'
            })

So you can optionally pass the id through the url (concatenating with the variable, for example):

$scope.toggle = function(modalstate, id, $location) {
    $scope.modalstate = modalstate;

    $location.path('/colaboradores/novocolaborador/' + id);

...and recover the same when in the other view, through $routeParams. Don’t forget to inject this service into your controller.

var id = $routeParams.id;