[英]Updating AngularJS scope after validating search form in Symfony2
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. 我们必须使用AngularJS在Symfony2中重写软件应用程序,我们使用Symfony2作为MVC目的,使用AngularJS作为有用的函数。
Here's our problem, we first display our clients in a table with the following code with AngularJS in my Symfony2 view : 这是我们的问题,我们首先在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
})
});
The {{ url(generatedScope) }}
is a Twig var sent by the Symfony2 controller with the following : {{ 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
is the name of our default route when opening our view clients/list.html.twig
(we're not using Doctrine) : 打开我们的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;
}
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 : 基本上我们的控制器发送的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>
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 : 我们有一个搜索表单,与显示我们客户的表格相同的页面,我们收集名字和姓氏,并调用一个动作来检索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;
}
We tried to send the view this route after validating the form in our indexAction
: 在我们的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 ? 那么,如何在验证Symfony2表单后更新angularJS范围?
If anyone has encountered this issue... would be glad to read his opinion! 如果有人遇到过这个问题......很高兴看到他的意见!
Best regards, 最好的祝福,
Dylan 迪伦
@Kodvin was right, i've come up with the following solution : @Kodvin是对的,我想出了以下解决方案:
First of all, my S2 Controller : 首先,我的S2控制器:
/**
* @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 : 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;
}
My form (Got rid of Symfony 2 forms... but I assume I can do that with S2 form aswell) : 我的形式(摆脱了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>
Binding my inputs to the scope with ng-model
使用ng-model
将我的输入绑定到范围
Calling the submit()
scope function when clicking the submit button in my 单击我的提交按钮时调用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 }}
is a Twig var calling my searchTiersAction() in my S2 controller to return data. {{ url(generatedScope }}
是一个Twig var,在我的S2控制器中调用我的searchTiersAction()来返回数据。
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. 我失踪的是我在提交表单时失去了我的POST参数,Ajax请求完全丢失了......这基本上是Angular的逻辑。
If you guys have any other solution, please tell us! 如果你们有任何其他解决方案,请告诉我们!
For the moment I hope it helps! 目前我希望它有所帮助! :) :)
Dylan 迪伦
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.