微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

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

我正在学习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

 

7).同时修改application.html.erb

Meta_tags %>

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

root 'welcome#index'

运行这个 – 这很好.

这是我们得到的:

enter image description here

角度正在工作:

enter image description here

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

enter image description here

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

enter image description here

你能解释为什么rails正在这样工作吗?

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

AngularJS ngApp文档

The ngApp directive designates the root element of the application and
is typically placed near the root element of the page

Only one AngularJS application can be auto-bootstrapped per HTML
document.

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

解决问题的方法是在你的< body>上放置ng-app =“”或者< html>您的application.html.erb中的标签可以根据您的需要而定. (如果你想要角度来操纵< head>部分中的标签,例如页面< title>,例如,只需在你的< html>标记上放置ng-app =“”.如果不是将它放在你的身体标签上.

Meta_tags %>

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

Meta_tags %>

奇迹般有效!

After adding ngApp to body tag

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

原文地址:https://www.jb51.cc/js/428909.html

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。

相关推荐