Rails javascript资产表现奇怪，具体取决于路由

Question

我正在学习Rails，我想在我的项目中使用angular。

这是一个从头开始的简单应用程序。

1）。 创建一个新的rails应用程序：

rails new hello_rails

2）。 将angular gem添加到Gemfile

gem 'angularjs-rails'

3）。 安装捆绑包

bundle install

4）。 在app/assets/javascripts/application.js添加角度到javascript清单

//=require angular

5）。 生成欢迎索引

rails generate controller welcome index

6）。 使用角度hello世界填充index.html.erb

 <div style = "background-color: grey">
    this is index.html.erb<br>

  <div ng-app="">
    <p>Name : <input type="text" ng-model="name"></p>
    <h1>Hello {{name}}</h1>
</div>

</div>

7）。 同时修改application.html.erb

<pre>
<!DOCTYPE html>
<html>
<head>
  <title>HelloRails</title>
  <%= stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track' => true %>
  <%= javascript_include_tag 'application', 'data-turbolinks-track' => true %>
  <%= csrf_meta_tags %>
</head>
<body style = "background-color:green">

  This is application.html.erb <br>

   <%= link_to "click here to go home", root_path %> <br>

A yeild statement is below: <br>
<%= yield %>

</body>
</html>

8）。 在config/routes.rb设置root路由到welcome#index config/routes.rb

root 'welcome#index'

运行这个 - 这很好。

这是我们得到的：

角度正在工作：

但是，如果我单击链接返回root_path它将停止工作

另外，如果我们在application.html.erb添加一些角度，则屈服角度会停止工作。

<div ng-app="">
<p>Name : <input type="text" ng-model="home_name"></p>
<h1>Hello {{home_name}} at home</h1>
</div>

你能解释为什么rails这样工作吗？

Answer 1

我按照你的步骤配置角度，就像你一样。 我删除了turbolinks，这解决了第一个问题。 第二个问题是由于错误使用了ngApp指令。

AngularJS ngApp文档

ngApp指令指定应用程序的根元素，通常放在页面的根元素附近

和

每个HTML文档只能自动引导一个AngularJS应用程序。

那就是说。 您的代码中有两次ng-app="" 。 并且由于一个应用程序只能被引导，所以application.html.erb包含角度代码的第一个div可以工作，但index.html.erb的另一个不会。

问题的解决方案是根据您的需要在application.html.erb <body>或<html>标签上放置ng-app="" 。 （如果你想要角度来操纵<head>部分中的标签，例如页面<title> ，例如只需在你的<html>标签上放置ng-app="" 。如果不是将它放在你的身体标签上。

<pre>
<!DOCTYPE html>
<html>
<head>
  <title>HelloRails</title>
  <%= stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track' => true %>
  <%= javascript_include_tag 'application', 'data-turbolinks-track' => true %>
  <%= csrf_meta_tags %>
</head>
<body style = "background-color:green" ng-app="">

  This is application.html.erb <br>
  <div>
    <p>Name : <input type="text" ng-model="home_name"></p>
    <h1>Hello {{home_name}} at home</h1>
  </div>

   <%= link_to "click here to go home", root_path %> <br>


A yeild statement is below: <br>
<%= yield %>

</body>
</html>

通过将ngApp放在<html>操作页面标题

<html  ng-app="">
<head>
  <title>{{home_name}} | HelloRails</title>
  <%= stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track' => true %>
  <%= javascript_include_tag 'application', 'data-turbolinks-track' => true %>
  <%= csrf_meta_tags %>
</head>
...

奇迹般有效！

以下是使用Angular with Rails并使用Angular正确配置turbolink的一些资源。 资源1
资源2

Rails javascript资产表现奇怪，具体取决于路由

问题描述

1 个解决方案

解决方案1
3 已采纳 2015-11-30 01:17:16

Rails javascript资产表现奇怪，具体取决于路由

问题描述

1 个解决方案

解决方案1 3 已采纳 2015-11-30 01:17:16

解决方案1
3 已采纳 2015-11-30 01:17:16