Javascript Rails产量和AngularJs路由器_Javascript_Ruby On Rails_Ruby On Rails 3_Angularjs

Javascript Rails产量和AngularJs路由器

javascript ruby-on-rails ruby-on-rails-3 angularjs

Javascript Rails产量和AngularJs路由器,javascript,ruby-on-rails,ruby-on-rails-3,angularjs,Javascript,Ruby On Rails,Ruby On Rails 3,Angularjs,我将angularJs与Rails一起使用，我使用以下布局： !!! 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

我将angularJs与Rails一起使用，我使用以下布局：

!!! 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（例如：设计登录url）执行操作时，AngularJs会删除我的yield的所有内容，因为没有AngularJs路径与当前路径匹配：

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'
  )
])

我该如何处理呢？

这可能比它的价值稍微多了一点工作，但我对这个问题的黑客解决方案是用一个带有

ng视图

或

ui视图

指令的简单

div

标记来呈现基本上是空的rails视图。因此，例如，不要将

ng视图

放在

application.html.erb

中，而只将其放在

show.html.erb

中，您希望角度模板填充视图而不是rails视图

因此，您的

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>

<section ng-view>

</section>

在我们的应用程序中，我们在控制器中使用一个类级别变量来确定页面是否应该包含角度挂钩。这样我们就可以打开和关闭它们。在我们的例子中，默认行为是关闭的，我们专门为站点的角度区域打开它（因为我们站点的大部分区域不是角度）。在大多数场地都是有角度的情况下，可以使用相反的变量

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

  .row-fluid
    -if @use_angular
      .span12{"ng-view" => ""}
        = yield
    -else
      .span12
        = yield