aktualizowania angularjs zakres po walidacji formularza wyszukiwarki w Symfony2

Question

Hi deweloperom stypendystka

musieli przepisać aplikację w Symfony2 z angularjs używamy Symfony2 w celu MVC i angularjs dla użytecznych funkcji.

Oto nasz problem, najpierw wyświetlane klientom w tabeli z następującego kodu z angularjs moim zdaniem Symfony2:

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 
    }) 
}); 

{{ url(generatedScope) }} jest var Gałązka wysłane przez kontroler Symfony2 z następujących czynności:

/** 
* @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 to nazwa naszej trasy domyślnej podczas otwierania nasz pogląd clients/list.html.twig (nie używamy Doctrine):

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

więc w zasadzie generatedScope wysyłane przez naszego regulatora jest: 127.0.0.0:8000/clients/list/json, która jest zbiorem json z naszych klientów, są następnie wyświetlane klientom w tabeli naszym zdaniem w ten sposób:

<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> 

Mamy formularz wyszukiwania, ta sama strona co tabela wyświetlająca naszych klientów, zbieramy imię i nazwisko oraz wywołujemy akcję, aby uzyskać odpowiedź jsona w celu aktualizacji naszego zakresu kątowego, udało nam się uzyskać odpowiedź w ten sposób:

/** 
* @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; 
} 

Próbowaliśmy wysłać widoku tej trasy po walidacji formularza w naszej 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() 
    ]); 
} 

Ale jak widać, to nie działa.

Jak zatem zaktualizować zakres kątowy JS po sprawdzeniu poprawności formularza Symfony2?

Jeśli ktoś napotkał ten problem ... z przyjemnością przeczytałby jego opinię!

poważaniem,

Dylan

Answer 1

@Kodvin rację, mam wymyślić następujące rozwiązanie:

Przede wszystkim mój S2 Kontroler:

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

GenerowanyScope searchTiers definiuje inną funkcję w moim kontrolerze, która pobiera dane:

/** 
* @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; 
} 

Moja forma (Pozbyłem się formularzy Symfony 2 ...ale zakładam, można to zrobić z formą S2 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> 

Oprawa moje wejść do zakresu z ng-model

Wywołanie funkcji submit() zakres po kliknięciu w przycisk w moim

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 }} to Twig var wywołujący funkcję searchTiersAction() w moim kontrolerze S2 w celu zwrócenia danych.

Wreszcie dane display:

<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> 

Wszystko czego brakowało to że tracę params POST kiedy złożenie mojego formularza, wniosek Ajax został całkowicie stracił ... który jest w zasadzie logiki kątowej za.

Jeśli masz jakieś inne rozwiązanie, powiedz nam!

Na razie mam nadzieję, że to pomoże! :)

Dylan