Question

我有一个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"

我想知道是否有更清洁的方法。我已经尝试将js.erb文件与这个

这样的渲染函数一起使用

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

但将其放在资产文件夹中，因此渲染功能无效https://stackoverflow.com/a/8370847/1087841。我想知道是否有更好的方法来做到这一点。

[编辑] js.erb文件实际上是一个角度工厂，它具有导航栏的默认HTML，然后角度控制器可以使用它来呈现默认数据。然后，工厂文件也会作为require添加到application.js。这是需要默认html的textarea

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

我可以使用默认的html放置值标记，但它有ng-model，因此不会显示任何内容。所以我为默认数据创建了一个工厂。现在工厂位于/ assets中，并在application.js中有//= require 'default_html_factory'。

Answer 1

我终于找到了办法。在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>

并在_navbar.html.erb文件中添加了此

<?php
/**
 * Template Name: Sale template
 */
?>
<?php
$paged = (get_query_var('paged')) ? get_query_var('paged') : 1;

$args = array(
    'post_type' => array(
        'houten_vloeren', 'keramische_tegels', 'natuursteen_vloeren', 'tegels', 'laminaat', 'pvc_vloeren', 'tafels_stoelen',

    ),
    'posts_per_page' => 5,
    'post_status' => 'publish',
    'paged' => $paged,
    'meta_query' => array(
        'key' => 'prijsknaller',
        'value' => '1',
        'compare' => '==',
        //'type'    => 'date',
    ),
);
$query = new WP_Query($args);
?>

<div class="container">
    <div class="row">
        <div class="col-md-12">
            <div class="row">
                <div class="product-overview">

                    <?php if ($query->have_posts()) :
                        while ($query->have_posts()) : $query->the_post(); ?>
                            <div class="col-md-3">
                                <div class="featured-block">
                                    <div class="featured-block-image">
                                        <a href="<?php the_permalink(); ?>"><img src="<?php the_field('productafbeelding'); ?>"
                                                                                 alt="<?php the_title(); ?>"></a>
                                    </div>
                                    <div class="featured-block-info">
                                        <h4><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h4>
                                        <?php if (get_field('prijs_oud')) : ?>
                                            <span class="oud"><?php the_field('prijs_oud'); ?></span>
                                        <?php endif; ?>
                                        <span class="nieuw"><?php the_field('prijs_nieuw'); ?></span> p/m<sub>2</sub>
                                    </div>
                                </div>
                            </div>

                        <?php endwhile; ?>
                    <?php endif; ?>
                    <?php the_posts_pagination(array(
                        'prev_text' => '&laquo;',
                        'next_text' => '&raquo;',
                    )); ?>
                </div>
            </div>
        </div>
    </div>
</div>

现在我可以以角度调用工厂并获取标题值。

更清洁的方式来在javascript中添加大块的HTML

1 个答案: