うぇぶろぐらまーな日誌

下記URLを参考にして作ってみた。

https://gist.github.com/romaricdrigon/6291435

■form_theme.html.twig

{# This is an extension of Twig Form Theme #}
{# We redefine form elements, so they are binded with Angular model #}
 
{% extends "::form_div_layout.html.twig" %}

{# Make data available to current scope as $scope.data - will not work with hidden fields #}
{% block widget_attributes %}
    {% spaceless %}
        ng-model="$parent.data['{{ full_name }}']" {# we add Angular ng-model #}
        id="{{ id }}" name="{{ full_name }}"{% if read_only %} readonly="readonly"{% endif %}{% if disabled %} 

disabled="disabled"{% endif %}{% if required %} required="required"{% endif %}{% if max_length %} maxlength="{{ 

max_length }}"{% endif %}{% if pattern %} pattern="{{ pattern }}"{% endif %}
        {% for attrname, attrvalue in attr %}{% if attrname in ['placeholder', 'title'] %}{{ attrname }}="{{ attrvalue|trans({}, 

translation_domain) }}" {% else %}{{ attrname }}="{{ attrvalue }}" {% endif %}{% endfor %}
        {% if value is defined %} ng-init="$parent.data['{{ full_name }}']='{{ value }}'"{% endif %}
    {% endspaceless %}
{% endblock widget_attributes %}
 
{# current controller submit() will called, instead of submitting the form #}
{% block form_start %}
    {% spaceless %}
        {% set method = method|upper %}
        {% if method in ["GET", "POST"] %}
            {% set form_method = method %}
        {% else %}
            {% set form_method = "POST" %}
        {% endif %}
        <form name="{{ form.vars.name }}" method="{{ form_method|lower }}" {% for attrname, attrvalue in attr %} {{ attrname 

}}="{{ attrvalue }}"{% endfor %}{% if multipart %} enctype="multipart/form-data"{% endif %} novalidate>
        <input type="hidden" name="_action" ng-init="$parent.action='{{ action }}'" />
        {% if form_method != method %}
            <input type="hidden" name="_method" value="{{ method }}" />
        {% endif %}
    {% endspaceless %}
{% endblock form_start %}

※ng-includeで取り込んだテンプレート内ではスコープが再生成されるので$parent.data~としてるところがポイント。

■angular側のフォーム描画部分。
※コントローラーの位置はここでなくても良い

<div 
    ng-include="formUrl"
    ng-controller="FormCntl"
></div>

■コントローラーのJS

coreCtrls.controller('taskEditCtrl', ['$scope', '$routeParams', '$http', '$route', '$templateCache',
    function($scope, $routeParams, $http, $route, $templateCache) {
		$scope.formUrl = location.pathname + 'api/task/' + $routeParams.id + '/edit';
		// フォームデータの入れ物を宣言。
		$scope.data = {};
		// $scope.actionにポスト先のURLが格納されている。
		$scope.submit = function() {
			$http.post($scope.action, reconstruction($scope.data)).success(function() {
				$templateCache.removeAll();
				$route.reload();
			});
		}
	}
]);

※reconstruction()はsymfonyのバリデーションを通過させるためにオブジェクトの構造を構築し直す俺々メソッド。jQuery.ajax()とAngularの$http.post()でサ

ーバー側に送信される構造が違う所為でくっそハマった。