Updating AngularJS scope after validating search form in Symfony2

Question

Hi fellow developers,

We have to rewrite a software application in Symfony2 with AngularJS, we use Symfony2 for the MVC purpose and AngularJS for the useful functions.

Here's our problem, we first display our clients in a table with the following code with AngularJS in my Symfony2 view :

var app = angular.module('appName', []);
app.controller('clientsCtrl', function ($scope, $http){
    $scope.loading = true;
    $http.post('{{ url(generatedScope) }}').then(function(response){
        $scope.clients = response.data;
        $scope.order = function(predicate){
            $scope.reverse = ($scope.predicate === predicate) ? !$scope.reverse :false;
            $scope.predicate = predicate;
        }
    },function(response){
        // TODO: handle the error somehow
    })
});

The {{ url(generatedScope) }} is a Twig var sent by the Symfony2 controller with the following :

 /**
 * @Route("/clients", name="index")
 */
public function indexAction(Request $request)
{       
    $form = $this->createForm(SearchClients::class, null);
    $form->handleRequest($request);

    if($form->isValid()){
        //TODO: Get form params and update angularJS scope somehow
    }

    return $this->render('clients/list.html.twig', [
        'generatedScope' => 'getClients',
        'form' => $form->createView()
    ]);
}

getClients is the name of our default route when opening our view clients/list.html.twig (we're not using Doctrine) :

 /**
 * @Route("/clients/list/json", name="getClients")
 */
public function getClientsAction()
{
    $clients = new Clients($this->get('database_connection'));
    $response = new JsonResponse($clients->getClients());
    return $response;
}

so basically the generatedScope sent by our controller is : 127.0.0.0:8000/clients/list/json , which is a json collection of our clients, We are then displaying clients in the table in our view this way :

<tr ng-repeat="x in clients | filter : test | orderBy:predicate:reverse">
    <td>#{{ x.cli_id }}</td>
    <td>{{ x.cli_lastname }}</td>
    <td>{{ x.cli_firstname }}</td>
</tr>

We have a search form, same page as the table displaying our clients, we collect first name and last name and call an action to retrive a json response in order to update our angular scope, we managed to retrive the response this way :

 /**
 * @Route("/tiers/list/json/search", name="searchClients")
 */
public function searchClientsAction(){
    $request = new Request($_POST);
    $request = $request->query->get('search_clients'); //form name
    $clients = new clients($this->get('database_connection'));
    $response = new JsonResponse($clients->searchClients($request));
    return $response;
}

We tried to send the view this route after validating the form in our indexAction :

if($form->isValid()){
    //TODO: Get form params and update angularJS scope somehow
    return $this->render('clients/list.html.twig', [
        'generatedScope' => 'searchClients',
        'form' => $form->createView()
    ]);
}

But as you can see, it doesn't work.

So, how can we update an angularJS scope after validating a Symfony2 form ?

If anyone has encountered this issue... would be glad to read his opinion!

Best regards,

Dylan

Answer 1

@Kodvin was right, i've come up with the following solution :

First of all, my S2 Controller :

 /**
 * @Route("/tiers", name="index")
 */
public function indexAction()
{       
    return $this->render('tiers/list.html.twig', [
        'generatedScope' => 'searchTiers',
    ]);
}

The generatedScope searchTiers define another function in my controller that fetch the datas :

/**
 * @Route("/tiers/list/json/search", name="searchTiers")
 */
public function searchTiersAction(Request $request){
    // TODO: A bit of refactoring needed there :-)
    $prenom = array('first_name' => $request->request->get('first_name'));
    $nom = array('last_name' => $request->request->get('last_name'));

    $params['first_name'] = $prenom['first_name'];
    $params['last_name'] = $nom['last_name'];

    $tiers = new Tiers($this->get('database_connection'));
    $response = new JsonResponse($tiers->searchTiers($params));

    return $response;
}

My form (Got rid of Symfony 2 forms... but I assume I can do that with S2 form aswell) :

<form method="post" ng-submit="submit()" id="search_tiers">
    <input ng-model="last_name" type="text" placeholder="Nom" name="last_name">
    <input ng-model="first_name" type="text" placeholder="Prénom" name="first_name">
    <input ng-model="submit" type="submit" value="Rechercher" name="submit_form">
</form>

Binding my inputs to the scope with ng-model

Calling the submit() scope function when clicking the submit button in my

app.controller('tiersCtrl', function ($scope, $http){
    $scope.submit = function() {
        var req = {
            method: 'POST',
            url: '{{ url(generatedScope)}}',
            headers: {
                'Content-Type': 'application/json'
            },
            data: { last_name: $scope.last_name, first_name: $scope.first_name }
        }

        $scope.loading = true;
        $http(req).then(function(response){
            $scope.tiers = response.data;
        },function(response){
            // TODO: handle the error somehow
        });
    }
});

{{ url(generatedScope }} is a Twig var calling my searchTiersAction() in my S2 controller to return data.

Finally, display data :

<tr ng-repeat="x in tiers">
    <td>#{{ x.tie_id }}</td>
    <td>{{ x.tie_nom }}</td>
    <td>{{ x.tie_prenom }}</td>
    <td>{{ x.tie_adresse }}</td>
    <td>{{ x.tie_cp }}</td>
    <td>{{ x.com_nom }}</td>
    <td class="visible-none">{{ x.tpt_nom }}</td>
</tr>

All I was missing was that I was losing my POST params when I was submitting my form, the Ajax request was totally lost... which is basically Angular's logic.

If you guys have any other solution, please tell us!

For the moment I hope it helps! :)

Dylan