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

getClients打开我们的视图时clients/list.html.twig我们是默认路由的名称(我们没有使用Doctrine):

 /**
 * @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,这是我们客户的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 是对的，我提出了以下解决方案：

\n\n

首先，我的 S2 控制器：

\n\n

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

\n\n

generatedScopesearchTiers在我的控制器中定义了另一个获取数据的函数：

\n\n

/**\n * @Route("/tiers/list/json/search", name="searchTiers")\n */\npublic function searchTiersAction(Request $request){\n    // TODO: A bit of refactoring needed there :-)\n    $prenom = array(\'first_name\' => $request->request->get(\'first_name\'));\n    $nom = array(\'last_name\' => $request->request->get(\'last_name\'));\n\n    $params[\'first_name\'] = $prenom[\'first_name\'];\n    $params[\'last_name\'] = $nom[\'last_name\'];\n\n    $tiers = new Tiers($this->get(\'database_connection\'));\n    $response = new JsonResponse($tiers->searchTiers($params));\n\n    return $response;\n}\n

\n\n

我的形式（摆脱了 Symfony 2 形式...但我认为我也可以使用 S2 形式做到这一点）：

\n\n

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

\n\n

将我的输入绑定到范围ng-model

\n\n

submit()单击我的提交按钮时调用作用域函数

\n\n

app.controller(\'tiersCtrl\', function ($scope, $http){\n    $scope.submit = function() {\n        var req = {\n            method: \'POST\',\n            url: \'{{ url(generatedScope)}}\',\n            headers: {\n                \'Content-Type\': \'application/json\'\n            },\n            data: { last_name: $scope.last_name, first_name: $scope.first_name }\n        }\n\n        $scope.loading = true;\n        $http(req).then(function(response){\n            $scope.tiers = response.data;\n        },function(response){\n            // TODO: handle the error somehow\n        });\n    }\n});\n

\n\n

{{ url(generatedScope }}是一个 Twig var，在我的 S2 控制器中调用我的 searchTiersAction() 以返回数据。

\n\n

最后，显示数据：

\n\n

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

\n\n

我所缺少的是，当我提交表单时，我丢失了 POST 参数，Ajax 请求完全丢失了......这基本上是 Angular 的逻辑。

\n\n

如果大家还有其他解决办法，请告诉我们！

\n\n

目前我希望它有帮助！:)

\n\n

迪伦

\n