Javascript 在Symfony2中验证搜索表单后更新AngularJS范围

各位开发者好

我们必须使用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控制器发送的一个细枝变量，包含以下内容：

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

（我们不使用原则）：

因此，我们的控制器发送的

generatedScope

基本上是：

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

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

在我们的

索引操作中验证表单后，我们尝试将视图发送到此路由：

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范围呢

如果有人遇到这个问题。。。我很乐意读他的意见

致以最良好的祝愿

迪伦
@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表单做到这一点）：

{url（generatedScope}}
是一个细枝变量，它在S2控制器中调用my SearchTierAction（）以返回数据

最后，显示数据：

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


#{x.tie_id}
{x.tie_nom}
{x.tie_prenom}
{x.tie_adresse}
{x.tie_cp}
{{x.com_nom}
{x.tpt_nom}

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

如果你们有其他的解决方案，请告诉我们

目前，我希望这能有所帮助！：）

Dylan
在
searchClientsAction
中，为什么要创建
请求的新实例？只需键入带有
Request$Request
的提示操作，该操作将由symfony填充。除非我误解了您的代码，否则这可能是问题所在吗？从您的措辞来看，我不确定您是否提交了表格。如果您是同步发布表单，那么“{url（generatedScope）}}”应该包含“searchClients”路由，但您并没有传递数据属性，特别是“searchClients”“其中需要查询'searchClientsAction'。另一方面，如果以异步方式发布，即使post请求包含所有必要的表单发布数据，如果您可以使用if（$form->isValid（））子句复制整个“searchClientsAction”函数内容，它也应该返回由细枝生成的html（从索引页，但使用不同的generatedScope变量）（我不推荐）。在我们将angularjs添加到symfony后端后，我们停止使用表单并开始使用后端作为rest api。然后，在您按下搜索按钮后，您将使用“search_clients”调用$http到“searchClientsAction”路由，并分配$scope.clients=response.data；@Kodvin是对的，请查看我自己关于该主题的答案。您能告诉我您的想法吗t我的解决方案，太棒了！谢谢大家：-）
<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>

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

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