在Symfony2中驗證搜索表單后更新AngularJS范圍

Question

嗨其他開發者，

我們必須使用AngularJS在Symfony2中重寫軟件應用程序，我們使用Symfony2作為MVC目的，使用AngularJS作為有用的函數。

這是我們的問題，我們首先在Symfony2視圖中使用AngularJS在一個表中顯示我們的客戶端，其中包含以下代碼：

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) }}是Symfony2控制器發送的Twig var，具有以下內容：

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

打開我們的view clients/list.html.twig （我們沒有使用Doctrine）時， getClients是我們默認路由的名稱：

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

基本上我們的控制器發送的generatedScope是： 127.0.0.0:8000/clients/list/json : 127.0.0.0:8000/clients/list/json clients/list/json，這是我們客戶的json集合，然后我們以這種方式在表格中顯示客戶端：

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

我們有一個搜索表單，與顯示我們客戶的表格相同的頁面，我們收集名字和姓氏，並調用一個動作來檢索json響應以更新我們的角度范圍，我們設法以這種方式檢索響應：

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

在我們的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()
    ]);
}

但正如你所看到的，它不起作用。

那么，如何在驗證Symfony2表單后更新angularJS范圍？

如果有人遇到過這個問題......很高興看到他的意見！

最好的祝福，

迪倫

Answer 1

@Kodvin是對的，我想出了以下解決方案：

首先，我的S2控制器：

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

generatedScope searchTiers在我的控制器中定義了另一個獲取數據的函數：

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

我的形式（擺脫了Symfony 2形式......但我認為我可以用S2形式做到這一點）：

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

使用ng-model將我的輸入綁定到范圍

單擊我的提交按鈕時調用submit()范圍函數

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 }}是一個Twig var，在我的S2控制器中調用我的searchTiersAction（）來返回數據。

最后，顯示數據：

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

我失蹤的是我在提交表單時失去了我的POST參數，Ajax請求完全丟失了......這基本上是Angular的邏輯。

如果你們有任何其他解決方案，請告訴我們！

目前我希望它有所幫助！ :)

迪倫