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）Angular js 删除了我的产量的所有内容，因为没有 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'
  )
])

我该如何管理？

4

2 回答 2

0

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

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

这可能比它的价值多一点工作，但我对这个问题的 hacky 解决方案是渲染基本上是空的 rails 视图，只有一个div带有ng-vieworui-view指令的简单标记。因此，例如，您只需将其放在您希望 Angular 模板填充视图而不是 rails 视图的位置，而不是放入ng-viewin 。application.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.erb会充满 rails 逻辑和一个普通的 erb 模板。但是当你的用户登录时，你可以将他们重定向到我提到的那个基本上是空的模板，它只包含一个ng-view.

所以如果他们被重定向到users/show show.html.erb看起来像：

<section ng-view>

</section>
于 2013-10-29T09:01:27.947 回答