2013-08-05 67 views
0

我使用和Rails angularJs我用這個佈局: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標誌)角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' 
) 
]) 

如何管理的?

回答

0

可能超過其價值多一點的工作,但我的哈克解決這個問題已經基本呈現什麼也沒有空軌的意見,但一個簡單的div標籤與ng-viewui-view指令。因此,例如,不要將ng-view放在application.html.erb中,而只是將它放在show.html.erb中,您希望使用Angular模板填充視圖而不是導軌視圖。

所以你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將充滿軌道邏輯和正常ERB模板。但是,當用戶登錄時,可以將它們重定向到我提到的基本上爲空的模板,它只包含一個ng-view

所以,如果他們被重定向到users/showshow.html.erb會是什麼樣子:

<section ng-view> 

</section> 
0

在我們的應用程序,我們使用一個類級別的變量在我們的控制器,以確定一個頁面是否應該包括角鉤與否。這樣我們就可以打開和關閉它們。在我們的例子中,默認行爲是關閉的,我們專門打開我們網站的角度區域(因爲我們大多數網站不是角度的)。在大多數站點是角度的情況下,您可以反向使用該變量。

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

在佈局/ application.html.erb

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