angularjs - 将 Angular.js 与 Symfony 2 表单一起使用

Question

我有一个使用 Symfony2 表单组件构建的简单编辑表单。这意味着此表单将在我的 php Controller 中填充模型数据。

但是每个表单输入都关联了一个 ng-model 指令。现在这是我面临的问题:

当在编辑表单上输入时，输入为空值(因为它们没有在 Angular Controller 中初始化)，但是如果我检查 Firebug ，它们将使用适当的数据设置值属性(因为数据已设置在 php Controller 中)。

有没有办法以某种方式也初始化 Angular 模型？

Answer 1

这不是对问题的直接回答，而是对使用 AngularJS 和 Symfony 2 (S2) 的一些评论。

AngularJS 确实想要控制您的浏览器并充当单页应用程序。它希望服务器被动地提供模板、图像等。它希望通过 json 传输数据 block 。

S2 View 组件确实想通过 twig 生成它自己的 html。它基于一个只能呈现发送内容(完整的 html 页面)的愚蠢浏览器。

Twig 与 AngularJS 模板并不过分兼容，尤其是因为它们都使用大括号。

S2 表单 html 生成器增加了一层额外的复杂性，因为它想要控制输入元素命名以允许将发布的数据映射回对象。 AngularJS 想要使用它自己的表单元素和 json。

我让每个人都做自己最擅长的事情。我只有一个 S2 twig 模板，它是应用程序的主要入口点。该模板提供了让 AngularJS 运行所需的 javascript。

然后我让 AngularJS 请求按照 AngularJS 希望看到的方式格式化的部分模板。 S2 不处理部分，也永远不会看到它们。

S2 用于实现类似 REST 的 web api。它获取数据并将其作为 json 提供。 JMSSerializer 包在这里派上用场。 AngularJS Controller 负责处理浏览器端的数据并将其映射到 AngularJS 表单。

拼图的缺失部分是使用 S2 表单组件进行验证。目前，我根本不使用表单组件。序列化程序帮助我将 json 数据映射到我的对象(替换 $form->handleRequest 功能)，然后直接调用验证器(替换 formIsValid)。

尽管有时我确实会错过表单组件，但它工作得相当不错。能够轻松地重用表单类型是件好事。

我真的很想让 S2 表单组件能够直接处理 json。它可能可以做到这一点。只需要更深入地研究它。

=============================================

这是一个 AngularJS 表单映射到 AngularJS 模型的例子

<form name="form" novalidate class="simple-form css-form">
ID: {{ person.id }}<br />

Full Name:  <input type="text"  ng-model="person.name_full"  name="person_name_full" required /><br />
<div ng-show="form.person_name_full.$dirty && form.person_name_full.$invalid">Invalid:
    <span ng-show="form.person_name_full.$error.required">Full Name is required.</span>
</div>

First Name: <input type="text"  ng-model="person.name_first" /><br />
Last Name:  <input type="text"  ng-model="person.name_last"  /><br />

Email: <input type="email" ng-model="person.email" name="person_email" required /><br />
<div ng-show="form.person_email.$dirty && form.person_email.$invalid">Invalid:
    <span ng-show="form.person_email.$error.required">Email is required.</span>
    <span ng-show="form.person_email.$error.email">This is not a valid email.</span>
</div>

使用 twig 生成的最大挑战是元素名称属性。愚蠢的 html 表单不能嵌套，并且要求每个名称都是唯一的。 S2 实现了它自己的相当冗长的命名约定，该约定部分基于元素顺序，因此难以预测。

AngularJS 需要名称来处理客户端验证，这反过来可以使您的应用程序响应更快并使用更少的带宽。

S2 需要名称来进行服务器端验证。这是一个基本的冲突。

AngularJS 支持嵌套表单和嵌套 json 数据。所以我们可以保持名称简单。

这就是为什么我认为当前的 S2 表单组件不能很好地与 AngularJS 配合使用。以及为什么拥有支持 AngularJS 的 S2 表单组件会很棒。