在rails的javascript中添加大块HTML的更简洁的方法

我有一个rails应用程序和angular，我需要填充一大块HTML，以便它可以为textarea标记填充默认文本。目前我所做的就是添加这样的文本

"<div class='navbar navbar-default letter-header hidden-sm hidden-xs'>\n" +
    "  <div class='container'>\n" +
    "    <div class='letter-navbar-header navbar-header'>\n" +
    "      <a href='/'><img src='/assets/logo.png' class='letters-logo navbar-brand'></a>\n" +
    "    </div>\n" +

    "    <div class='navbar-header header-text'>\n" +
    "      <div class='navbar-text'>\n" +
    "        "text" + "\n" +
    "      </div>\n" +
    "    </div>\n" +
    "    <div class='letter-navbar-header navbar-header'>\n" +
    "      <a href='/'>\n" +
    "        <img src='' class='second-logo'>\n" +
    "      </a>\n" +
    "    </div>\n" +
    "    <div class='navbar-header navbar-right'>\n" +
    "      {{ user_login }}" + "\n" +
    "    </div>\n" +
    "  </div>\n" +
    "</div>\n"

“\n”+
“\n”+
“\n”+
“\n”+
“\n”+
“\n”+
“\n”+
“文本”+“\n”+
“\n”+
“\n”+
“\n”+
“\n”+
“\n”+
“\n”+
“{{user\u login}}”+“\n”+
“\n”+
“\n”+
“\n”

我想知道是否有更干净的方法可以做到这一点

<%= j render('navbar') %>

但是将它放在资产文件夹中，因此渲染功能不起作用。我想知道是否有更好的方法

[编辑] js.erb文件实际上是一个angular factory，它具有导航栏的默认HTML，angular controller可以使用该HTML呈现默认数据。然后，该factory文件也会根据需要添加到application.js中。 这是需要默认html的文本区域

<textarea name="t[navigation]" id="input-navigation-bar" ng-model="t.navigation_bar" class="form-control" rows="10"></textarea>

---

我本可以用默认html放置值标记，但它有

ng模型

，因此没有显示任何内容。因此，我为默认数据创建了一个工厂。现在工厂位于/assets中，并且在application.js中有一个

/=require'default\u html\u factory'

，我终于找到了一种方法。在erb页面中，我添加了

<script>
  <%= render 'style_factory.js.erb' %>
</script>

在工厂里我加了这个

this.ngapp.factory('TenantStyle', function() {
  return {
    header: "<%= j render 'navbar' %>"
  }
});

<div class="navbar navbar-default letter-header hidden-sm hidden-xs">
  <div class="container">
    <div class="letter-navbar-header navbar-header">
    </div>

    <div class="navbar-header header-text">
      <div class="navbar-text">
      </div>
    </div>
    <div class='letter-navbar-header navbar-header'>
      <a href='/'>
        <img src='' class='second-logo'>
      </a>
    </div>

    <div class="navbar-header navbar-right">
    </div>
  </div>
</div>

this.ngapp.factory（'TenantStyle'，function（）{
返回{
标题：“
}
});

在_navbar.html.erb文件中，我添加了这个

this.ngapp.factory('TenantStyle', function() {
  return {
    header: "<%= j render 'navbar' %>"
  }
});

<div class="navbar navbar-default letter-header hidden-sm hidden-xs">
  <div class="container">
    <div class="letter-navbar-header navbar-header">
    </div>

    <div class="navbar-header header-text">
      <div class="navbar-text">
      </div>
    </div>
    <div class='letter-navbar-header navbar-header'>
      <a href='/'>
        <img src='' class='second-logo'>
      </a>
    </div>

    <div class="navbar-header navbar-right">
    </div>
  </div>
</div>

---

现在我可以调用angular中的工厂并获取标题值。

我终于找到了一种方法。在erb页面中，我添加了

<script>
  <%= render 'style_factory.js.erb' %>
</script>

在工厂里我加了这个

this.ngapp.factory('TenantStyle', function() {
  return {
    header: "<%= j render 'navbar' %>"
  }
});

<div class="navbar navbar-default letter-header hidden-sm hidden-xs">
  <div class="container">
    <div class="letter-navbar-header navbar-header">
    </div>

    <div class="navbar-header header-text">
      <div class="navbar-text">
      </div>
    </div>
    <div class='letter-navbar-header navbar-header'>
      <a href='/'>
        <img src='' class='second-logo'>
      </a>
    </div>

    <div class="navbar-header navbar-right">
    </div>
  </div>
</div>

this.ngapp.factory（'TenantStyle'，function（）{
返回{
标题：“
}
});

在_navbar.html.erb文件中，我添加了这个

this.ngapp.factory('TenantStyle', function() {
  return {
    header: "<%= j render 'navbar' %>"
  }
});

<div class="navbar navbar-default letter-header hidden-sm hidden-xs">
  <div class="container">
    <div class="letter-navbar-header navbar-header">
    </div>

    <div class="navbar-header header-text">
      <div class="navbar-text">
      </div>
    </div>
    <div class='letter-navbar-header navbar-header'>
      <a href='/'>
        <img src='' class='second-logo'>
      </a>
    </div>

    <div class="navbar-header navbar-right">
    </div>
  </div>
</div>

现在我可以调用angular中的工厂并获得标题值