0

私はRailsでangularJsを使用しており、このレイアウトを使用しています:

!!! 5
%html(lang="en"){"ng-app"=>"MyApp"}
  %head
    %meta(charset="utf-8")
    %meta(http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1")
    %meta(name="viewport" content="width=device-width, initial-scale=1.0")
    %title= content_for?(:title) ? yield(:title) : "MyApp"
    = csrf_meta_tags
    / Le HTML5 shim, for IE6-8 support of HTML elements
    /[if lt IE 9]
      = javascript_include_tag "http://html5shim.googlecode.com/svn/trunk/html5.js"

    /[if lt IE 8]
      = stylesheet_link_tag "application-ie", :media => "all"

    = stylesheet_link_tag "application", :media => "all"
    %link(href="assets/apple-touch-icon-144x144.png" rel="apple-touch-icon-precomposed" sizes="144x144")
    %link(href="assets/apple-touch-icon-114x114.png" rel="apple-touch-icon-precomposed" sizes="114x114")
    %link(href="assets/apple-touch-icon-72x72.png" rel="apple-touch-icon-precomposed" sizes="72x72")
    %link(href="assets/apple-touch-icon.png" rel="apple-touch-icon-precomposed")
    %link(href="assets/favicon.ico" rel="shortcut icon")


  %body
    .container.content
      .row-fluid.notifications
        - if alert || notice
          .span12
            - if alert
              .alert.alert-error= alert
            - if notice
              .alert.alert-info= notice


      .row-fluid
        .span12{"ng-view" => ""}
          = yield

    = javascript_include_tag "application"
    = yield :javascript

私の問題は次のとおりです: Rails URL (例: Devise サインイン URL) に対して行うと、AngularJs ルートが現在のものと一致しないため、Angular js は私の利回りのすべてのコンテンツを削除します:

window.App = angular.module('MyApp', ['ngResource', 'ng-rails-csrf','ui.bootstrap']).config(['$routeProvider', '$locationProvider' ,
($routeProvider, $locationProvider) ->
  #$locationProvider.hashPrefix('');
  $locationProvider.html5Mode true
  $routeProvider.when("/applications",
    controller: 'ApplicationListCtrl'
    templateUrl: '/applications.html?l=false'
  )
])

どうすればそれを管理できますか？

4

2 に答える 2

0

このアプリでは、コントローラーでクラス レベルの変数を使用して、ページに angular フックを含める必要があるかどうかを識別します。そうすれば、オンとオフを切り替えることができます。私たちの場合、デフォルトの動作はオフになっており、特にサイトの角度のある領域に対してオンにしています (サイトのほとんどは角度がないため)。サイトの大部分が角度のある場合は、変数を逆に使用できます。

class MyController < ApplicationController
  def angular_page
    @use_angular = true
  end
  def non_angular_page
    # do nothing
  end
end

layouts/application.html.erb 内

  .row-fluid
    -if @use_angular
      .span12{"ng-view" => ""}
        = yield
    -else
      .span12
        = yield
于 2014-04-26T18:42:12.400 に答える
0

その価値よりも少し手間がかかるかもしれませんが、この問題に対する私のハックな解決策は、 orディレクティブdivを含む単純なタグだけを使用して、本質的に空の Rails ビューをレンダリングすることです。たとえば、inを配置する代わりに、Rails ビューの代わりに Angular テンプレートにビューを設定させたい場所にのみ配置します。ng-viewui-viewng-viewapplication.html.erbshow.html.erb

したがって、次のapplication.html.erbようになります。

<!DOCTYPE html>
<html ng-app="myApp">
<head>
  <title>My Application</title>
  <%= stylesheet_link_tag    "application", :media => "all" %>
  <%= javascript_include_tag "application" %>
  <%= csrf_meta_tags %>
</head>
<body>

<%= yield %>

</body>

そして、login.html.erbRails ロジックと通常の erb テンプレートで埋められます。ただし、ユーザーがログインすると、前述の本質的に空のテンプレートにリダイレクトできますng-view。

したがって、リダイレクトされた場合はusers/show show.html.erb次のようになります。

<section ng-view>

</section>
于 2013-10-29T09:01:27.947 に答える