Le risorse javascript di Rails si comportano in modo strano a seconda del routing

Attualmente sto imparando Rails e sto volendo usare angolare nel mio progetto.Le risorse javascript di Rails si comportano in modo strano a seconda del routing

Ecco una semplice applicazione da zero.

1). Creare una nuova app per i binari:

rails new hello_rails

2). Aggiungere gemma angolare Gemfile

gem 'angularjs-rails'

3). Installa il pacchetto

bundle install

4). Aggiungere angolare a JavaScript manifesta app/assets/javascripts/application.js

//=require angular

5). Genera indice di benvenuto

rails generate controller welcome index

6). Compilare index.html.erb con un mondo ciao angolare

<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). Modificare anche 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). Imposta percorso root per welcome#index in config/routes.rb

root 'welcome#index'

Run questo - questo funziona bene.

Ecco cosa si ottiene:

L'angolare sta lavorando:

Tuttavia, se si fa clic sul link per tornare alla root_path smette di funzionare

Inoltre, se aggiungiamo un po 'angolare al nostro application.html.erb, i fermi angolari ceduti funzionano.

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

Può spiegare perché rotaie sta lavorando in questo modo?

fonte

2015-11-15 dwjohnston

Hai rimosso i turbolinks? – max

@max Nope ... .. – dwjohnston

Non penso che i turbolinks e gli angolari debbano essere usati insieme e molto probabilmente non suoneranno bene. Rimuovi i turbolink dal tuo Gemfile e '// = richiedi i turbolinks' dal tuo' application.js'. – max

Ho seguito i tuoi passi e configurato angolare nello stesso modo in cui hai fatto. Ho rimosso i turbolinks e questo ha risolto il primo problema. Il secondo problema era dovuto all'errato utilizzo della direttiva ngApp.

AngularJS ngApp documentazione

La direttiva ngApp designa l'elemento principale dell'applicazione e è tipicamente posizionato vicino l'elemento principale della pagina

Solo un'applicazione AngularJS può essere avviata automaticamente per HTML documento.

Detto questo. Hai ng-app="" due volte nel tuo codice. E poiché una sola applicazione può essere riavviata, il primo div contenente il codice angolare nel tuo application.html.erb funzionerebbe ma l'altro in index.html.erb non lo farebbe.

La soluzione al vostro problema è posto ng-app="" sulle tue <body> o <html> tag nel vostro application.html.erb base alle proprie esigenze. (Se si desidera angolare di manipolare i tag nella sezione <head> come pagina <title> per esempio è sufficiente posizionare ng-app="" sul tag <html>. Se non basta posizionarlo sul vostro tag body. Titolo della pagina

<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>

Manipolazione mettendo ngApp in <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> 
...

funziona come un fascino!

Ecco alcune risorse per l'utilizzo di Angular con Rails e configurare correttamente i turbolinks con Angular. Resource 1
Resource 2

fonte

2015-11-30 01:17:16

Le risorse javascript di Rails si comportano in modo strano a seconda del routing

risposta

Problemi correlati