[英]Redcarpet gem with Angularjs in rails application
I'm using Redcarpet gem to render markdown. 我正在使用Redcarpet gem渲染降价促销。
This is my posts_helper.rb
file: 这是我的posts_helper.rb
文件:
module PostsHelper
def markdown
options = [:autolink => true, :space_after_headers => true, :hard_wrap => true, :prettify => true]
Redcarpet::Markdown.new(Redcarpet::Render::HTML, *options)
end
end
It works in my view file index.html.erb
. 它可以在我的视图文件index.html.erb
。
<% @posts.each do |post| %>
<tr>
<td><%= post.title %></td>
<td><%= markdown.render(post.summary).html_safe %></td>
<td><%= link_to 'Show', post %></td>
<td><%= link_to 'Edit', edit_post_path(post) %></td>
<td><%= link_to 'Destroy', post, method: :delete, data: { confirm: 'Are you sure?' } %></td>
</tr>
<% end %>
However, After I use Angular.js, it doesn't work. 但是,在我使用Angular.js之后,它不起作用。 Redcarpet can't parser the data from angular.js. Redcarpet无法解析angular.js中的数据。 How should I solve this problem. 我应该如何解决这个问题。
# app/assets/javascripts/app.js.coffee
window.App = angular.module('AngularPosts', ['ngResource'])
# app/assets/javascripts/angular/controller/posts_ctrl.js.coffee
App.controller 'PostsCtrl', ['$scope', 'Post', ($scope, Post) ->
$scope.posts = Post.query()
]
# app/assets/javascripts/angular/services/posts.js.coffee
App.factory 'Post', ['$resource', ($resource) ->
$resource '/posts/:id', id: '@id'
]
# app/views/home/index.html.erb
<div ng-controller="PostsCtrl">
<ul>
<li ng-repeat="post in posts">
<h3><%= '{{post.title}}' %></h3>
<div><%= markdown.render("{{post.summary}}").html_safe %></div>
</li>
</ul>
</div>
How do I render the data correctly? 如何正确呈现数据?
What I got like this: 我得到的是这样的:
In browser: 在浏览器中:
You'll need to send the post.summary
pre-rendered as part of your JSON payload. 您需要发送预渲染的post.summary
作为JSON有效负载的一部分。 Or you can use a javascript alternative, like Showdown.js to render the markdown on the client side. 或者,您可以使用JavaScript替代方法,例如Showdown.js在客户端渲染markdown。
These lines only render once, when the view is rendered. 渲染视图时,这些行仅渲染一次。
<h3><%= '{{post.title}}' %></h3>
<div><%= markdown.render("{{post.summary}}").html_safe %></div>
Giving you: 给你:
<h3>{{post.title}}</h3>
<div><p>{{post.summary}}</p></div>
At which point Angular takes over. 在这一点上,Angular接管了。 There is no further Ruby at this point. 目前没有其他Ruby。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.