Switch from view to controller (Ng-Click)

Asked

Viewed 649 times

1

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.

javascript angularjs ng-controller

1 answer

0


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;

  • Okay, I get that explanation. But I’m not getting the view swap, "$Location.path" doesn’t seem to be working....

  • Hmm, I don’t think that hashtag is necessary. Just try using '/collaborators/' if it works I’ll edit the answer.

  • worked, thanks for the help

  • I’d like to know how to recover the id when it’s already in the other view. You said through $routeParams, but if I’m already in the other view, with a new controller, what should I do to recover that id? Create a function that retrieves the id? where to call this function at the beginning of the view?

  • I was able to recover this id by means of a button in the new view (I did only for testing), however I would like to do this automatically, when it enters the view it already recover the id by routeparams...

  • One way is to create a function and already call it at the beginning of your controller, so it will run at the opening of the screen. You check whether $routeParams.id exists and, if it exists, assign the value to the variable you want (if you use it in the view, it must be in $Scope).

  • Cara I did the following function in my controller: http://freetexthost.com/p3rx05ptjb I called her at the beginning of my view {{recuperarId()}} but she is running endlessly, I believe it is because the view is updated all the time. I was wondering if there is any view "builder method", so I can recover id only once.

  • There is no need to call the function by view. It’s being executed many times because, the way you did it, it runs every Angular cycle. A simple way is to call it at the beginning of your controller itself: http://freetexthost.com/6on6bb5zc1

Show 3 more comments

Browser other questions tagged javascript angularjs ng-controller

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