ruby-on-rails - rails 中 link_to 内的 Angular 表达式

Question

有谁知道如何在 rails 中的 link_to 中插入 Angular 表达式。

<section ng-controller="listServiceCtrl">   
    <ul ng-repeat="service in servicelist">
        <li><%= link_to '{{ service.service}}', home_user_path('{{ service.id}}') %></li>
    </ul>
</section>

我得到一个错误。

Answer 1

如果您查看 link_to() 的 Rails 文档, 他们是这样说的:

link_to "Profile", profile_path(@profile)

# => <a href="/profiles/1">Profile</a>

所以如果你写:

<%= link_to '{{ service.service}}', ..... %>

...你会得到字符串:

"<a href=....>{{ service.service}}</a>"

...这正是您要在 angularjs 的 html 中获取的内容。到目前为止，还不错。

接下来，路径助手 的 Rails 指南显示了这一点:

In the case of resources :photos [in config/routes.rb]:

photos_path returns /photos

new_photo_path returns /photos/new

edit_photo_path(:id) returns /photos/:id/edit (for instance, edit_photo_path(10) returns /photos/10/edit)

photo_path(:id) returns /photos/:id (for instance, photo_path(10) returns /photos/10)

代码中的以下路径助手:

home_user_path(3)

...看起来它与上面最后一个路径助手的格式相匹配。您的模型名为 HomeUser 吗？如果是，则如下:

home_user_path(3)

将返回字符串:

"/home_users/3"

好的。但是是否可以这样写:

home_user_path('hello')

参数必须是数字吗？字符串参数会产生错误吗？事实证明，上面的行返回字符串:

"/home_users/hello"

因此，看起来您可以使用任意字符串作为 Rails 路径助手的参数。但是，如果您在 View 中尝试以下操作:

<% my_href = home_user_path('{{ service.id}}') 
   puts "*** #{my_href}"
%>

...然后加载页面，然后查看显示服务器输出的终端窗口，然后向上滚动，您将看到:

*** /home_users/%7B%7B%20service.id%7D%7D

这是什么鬼？如果仔细观察，您可以辨认出文​​字 service.id ，但是两边的胡言乱语是什么？如果您有足够的经验，您会认出那是 url 编码。 url 只能包含某些字符，如果您需要在 url 中包含非法字符，则必须对其进行 url 转义。 url 转义可由领先的 % 识别符号。很明显 home_user_path() 是转义字符 {{ 的 url和 }}在返回之前在 url 字符串中。如果您检查合法 url 字符列表，则不包括大括号——因此，当大括号出现在 url 中时必须对其进行转义。因此，Rails 路径助手会自动转义 url 中的非法字符——这通常是一个不错的功能。

当然，angularJS 无法识别 url 在 <a> 中用作 href 属性值时转义的乱码。标签。但是，有一种方法可以逆转 url 转义。给定字符串:

"/home_users/%7B%7Bservices.id%7D%7D"

您可以反转义 字符串以获取原始字符串。执行 url unescaping 的 ruby​​ 方法在 Ruby 标准库中:

ruby 1.9: CGI::unescape()

ruby 2.0: URI::unescape()
          URI::decode_www_form_component() <--Use this one!  Even though its name is confusing, it's more reliable.  See: https://www.ruby-forum.com/topic/207489

ruby 2.2: URI::decode_www_form_component()  

(我实际上打算在下面的讨论中使用 URI::unescape() 来使事情更清楚——新方法的名称太长且令人困惑。)

显然，rails 会为您执行 require 'uri'(或 require 'cgi')，因此您只需在 View 中调用该方法即可。如果你尝试:

<% url_escaped_href = home_user_path('{{ service.id}}') 
   my_href = URI::unescape(url_escaped_href)

   puts "*** #{my_href}"
%>

...您将在服务器窗口中看到以下内容:

*** /home_users/{{ service.id}}

...当然，这就是您想要的 <a> 中 href 属性的值。标签。因此，你可以这样写:

<%= link_to '{{ service.service}}', 
            URI::unescape( home_user_path('{{ service.id}}') ) 
%>

或等同于:

<% url_escaped_href = home_user_path('{{ service.id}}') 
   my_href = URI::unescape(url_escaped_href)
%>

<%= link_to '{{ service.service}}', my_href %>

这将产生字符串:

<a href="/home_users/{{service.id}}">
   {{service.service}}
</a>

然后，当 html 文件发送到您的浏览器时(请注意，一个文件只是一个大字符串)，您的浏览器将识别 <a>标记为 html，然后呈现。然后，当浏览器在页面上执行 javascript 时，angularJS 将发挥它的魔力，用 javascript 变量的值替换双 curl 。

一个问题:链接可能会在 angularJS 有机会替换 double curlies 之前显示出来。有一个值。如果发生这种情况，并且用户单击该链接，他们将收到 404/Page Not Found 错误。使用 ng-href 的优势属性是在 angularJS 有机会用值替换双 curl 之前，链接不会显示。因此，您可能希望放弃使用 rails link_to() 表单助手并手动构建链接标记，类似于 Rimian 发布的内容:

  <% url_escaped_href = home_user_path('{{ service.id}}') 
     my_href = URI::unescape(url_escaped_href)
  %>

  <div>
  <a ng-href="<%= my_href %>">{{service.service}}</a>
  </div>