django - 将 Django 表单元素绑定到 AngularJS ng-model

Question

通常，当我使用 Django 的 Form API 显示模型表单时，我会将form对象传递给模板，django.template.Context并使用 Django 的模板语言呈现其字段：

<form role="form" method="post">
    {% csrf_token %}           
    {{ form.non_field_errors }}
    <div class="form-group">
        <label for="id_content">Content</label>
        {{ form.content }}
    </div>
    <button type="submit" class="btn btn-default">Submit</button>
</form>

将form.content呈现为

<textarea id="id_content" rows="10" cols="40" name="content" style="margin: 2px; width: 339px; height: 164px;"></textarea>

但现在我想将它与 一起使用AngularJS，即将输入字段绑定到 ng-model

<textarea ng-model="content" id="id_content" rows="10" cols="40" name="content" style="margin: 2px; width: 339px; height: 164px;"></textarea>

有没有办法做到这一点？

Answer 1

一种方法是覆盖表单 init 方法并更新小部件属性：

class MyForm(forms.ModelForm):
    # fields..

    def __init__(self, *args, **kwargs):
        super(MyForm, self).__init__(*args, **kwargs)
        self.fields['content'].widget.attrs.update({'ng-model': 'content'})