在AngularJ中使用部分视图的最佳方法是什么（在Rails中）？

Question

Suppose there is a form page for Project , which has name and description . Take a look at the render :partial .

<div class="page-header">
  <h2>{{project.id ? 'Edit ' : 'Add new'}} project</h2>
</div>

<div class="row">
  <div class="col-xs-6 col-xs-offset-2">
    <form class="form-horizontal">
      <%= render :partial => 'templates/forms/text', :object => 'name', :locals => {:model => 'project'} %>
      <%= render :partial => 'templates/forms/text', :object => 'description', :locals => {:model => 'project'} %>
      <div class="form-group">
        <div class="col-xs-offset-3 col-xs-9">
          <button ng-click="saveProject()" type="submit" class="btn btn-success">Submit</button>
          <a ng-href="{{ path('UserIndexCtrl') }}" class="btn btn-default">Back</a>
        </div>
      </div>
    </form>
  </div>
</div>

And here is a partial being used.

<div class="form-group" ng-class="{'has-error': errors.<%= text.underscore %>}">
  <label for="<%= model %>.<%= text %>" class="col-xs-3 control-label"><%= text.titleize.humanize %></label>
  <div class="col-xs-9">
    <input id="<%= model %>.<%= text %>" name="<%= model %>.<%= text %>" type="<%= local_assigns[:type] || 'text' %>" class="form-control" ng-class="{'text-danger': true}" ng-model="<%= model %>.<%= text %>">
    <span class="help-block" ng-show="errors.<%= text.underscore %>"><%= text.titleize.humanize %> {{errors.<%= text.underscore %>.join(', ')}}</span>
  </div>
</div>

I am not sure this is the proper way to do a partial rendering in Rails + AngularJs combo. Wonder if there's a more angular-ish way? Thanks!

Answer 1

I would use a Helper to generate the input instead of writing directly in the HTML, something like:

def input_for_model(model_name, text, options = { }) # I actually have no idea what is doing your input, you can probably find a better name
  options = { id: "#{model_name}.#{text}", name: "#{model_name}.#{text}",
              type: 'text', class: 'form-control', 
              ng-class: "{'text-danger': true}", 
              ng-model: "#{model_name}.#{text}" 
            }.merge(options)
  tag(:input, options)
end

And use it like this:

<div class="form-group" ng-class="{'has-error': errors.<%= text.underscore %>}">
  <label for="<%= model %>.<%= text %>" class="col-xs-3 control-label"><%= text.titleize.humanize %></label>
  <div class="col-xs-9">

    <%= input_for_model(model, text, type: local_assigns[:type] || 'text') %>

    <span class="help-block" ng-show="errors.<%= text.underscore %>"><%= text.titleize.humanize %> {{errors.<%= text.underscore %>.join(', ')}}</span>
  </div>
</div>