Javascript 使用导轨两次角度加载页眉和页脚
我正在构建一个Rails应用程序，该应用程序提供前端视图。目前我遇到一个问题，Angular会将页眉和页脚加载到嵌套的Angular视图中 例如，我有一个页面列出了最新的报价请求。在这个视图中，页眉后面是另一个页眉（这是不需要的），然后是引号列表，然后是页脚后面是另一个页脚（这也是不需要的） 我不确定发生了什么，一旦我以用户身份登录，可能会有人帮我 Application.HtmlJavascript 使用导轨两次角度加载页眉和页脚,javascript,angularjs,ruby,frontend,Javascript,Angularjs,Ruby,Frontend,我正在构建一个Rails应用程序，该应用程序提供前端视图。目前我遇到一个问题，Angular会将页眉和页脚加载到嵌套的Angular视图中 例如，我有一个页面列出了最新的报价请求。在这个视图中，页眉后面是另一个页眉（这是不需要的），然后是引号列表，然后是页脚后面是另一个页脚（这也是不需要的） 我不确定发生了什么，一旦我以用户身份登录，可能会有人帮我 Application.Html <!DOCTYPE html> <html> <head> <ti
<!DOCTYPE html>
<html>
<head>
<title>StrangeCessation</title>
<%= stylesheet_link_tag 'application', media: 'all' %>
<%= javascript_include_tag 'application'%>
<%= csrf_meta_tags %>
<meta name="viewport" content="width=device-width, intial-scale=1, maximum-scale=1">
</head>
<body ng-app="StrangeCessation">
<div class="section1">
<div class="heading">
<%= image_tag "HEADER.jpg", class: "himg" %>
</div>
</div>
<div class="container-fluid" ui-view="main">
<%= yield %>
<hr>
</div>
<div class="footer ">
<% if !logged_in? %>
<script>
$(document).ready(function () {
document.getElementById("lgfields").style.visibility = "hidden";
});
function switchFields() {
if(document.getElementById("lgfields").style.visibility == "hidden") {
document.getElementById("lgfields").style.visibility = "visible"
} else {
document.getElementById("lgfields").style.visibility = "hidden"
};
}
</script>
<div>
<span class="col-xs-offset-5 col-sm-offset-10">Strange Cessation</span>
<span class="loginI">
<a onclick="switchFields()"><%= image_tag "login.png", class: "loginIcon loginImage" %></a>
</span>
<div id="login" class="col-sm-offset-10">
<div id="lgfields">
<%= render partial: "sessions/new" %>
</div>
</div>
</div>
<% else %>
<span>Strange Cessation</span>
<div class="navigation">
<a ui-sref="home">Home</a>
<a ui-sref="quotes">Quotes</a>
<a ui-sref="users">Users</a>
<%= link_to "Log out", logout_path, method: "delete" %>
</div>
<% end %>
</div>
</body>
</html>
<% if logged_in? %>
<div class="quotespage" >
<div class="userleftpanel col-xs-2 col-sm-3 col-sm-offset-1">
<div class="row">
<h1> Welcome <%= current_user.username %> </h1>
</div>
<div class="row">
<%= image_tag current_user.avatar %>
</div>
<div class="row">
<script>
$(document).ready(function() {
document.getElementById('settings').style.visibility = 'hidden';
document.getElementById('fullquote').style.visibility = 'hidden';
});
function switchSettings() {
if(document.getElementById('settings').style.visibility == 'hidden') {
document.getElementById('settings').style.visibility = "visible"
} else {
document.getElementById('settings').style.visibility = 'hidden'
};
}
</script>
<a onclick="switchSettings()"> Settings </a>
<div id="settings">
<%= render :partial => "users/form", :locals => { :user => @user } %>
</div>
</div>
</div>
<div class="quoteicons col-xs-8">
<div class="openquotes col-xs-2">
<h2><%= @quotes.count %> Open Jobs</h2>
</div>
<div class="newquotes col-xs-2 col-xs-offset-1">
<h2>
<% @myarray = [] %>
<% @quotes.each do |quote| %>
<% if quote.unread?(current_user) == true %>
<% @myarray.push(quote) %>
<% end %>
<% end %>
<%= @myarray.count %> New Request
</h2>
</div>
<div class="deletedquotes col-xs-2 col-offset-1">
<h2> Deleted Quotes </h2>
</div>
</div>
<div id='quotes' class="quotes col-xs-5 col-md-5" >
<div id="full" ui-view="fullquote"></div>
<div ng-repeat="quote in quotes" class="request">
<a ng-click="showQuote(quote);">
<span ng-if="quote.read == false"> *NEW*</span>
<span class="col-xs-12">Request #{{quote.id}}</span><br>
<span class="col-xs-1">{{quote.name}}</span>
<span class="col-xs-1">{{quote.email}}</span>
<span class="col-xs-4 col-xs-offset-4">{{quote.city}}, {{quote.state}}, {{quote.region}} </span>
</a>
<div ng-show="quote.visible">
<div><a ui-sref="quotes.detail({id: quote.id})" ng-click="showfullquote()" ng-init="fullquote = false">View</a>
<a ng-click="deleteQuote(quote)" style="float:left;"> Delete </a>
<div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<% end %>
我会尝试将
ng app=“奇怪的停止”之后的div，我建议您尝试两种解决方案，看看其中一种是否有效。如果看不到更多的代码，这两种方法都可能是解决方案
<!DOCTYPE html>
<html>
<head>
<title>StrangeCessation</title>
<%= stylesheet_link_tag 'application', media: 'all' %>
<%= javascript_include_tag 'application'%>
<%= csrf_meta_tags %>
<meta name="viewport" content="width=device-width, intial-scale=1, maximum-scale=1">
</head>
<div class="section1">
<div class="heading">
<%= image_tag "HEADER.jpg", class: "himg" %>
</div>
</div>
<body ng-app="StrangeCessation">
<div class="container-fluid" ui-view="main">
<%= yield %>
<hr>
</div>
</body>
<div class="footer ">
<% if !logged_in? %>
<script>
$(document).ready(function () {
document.getElementById("lgfields").style.visibility = "hidden";
});
function switchFields() {
if(document.getElementById("lgfields").style.visibility == "hidden") {
document.getElementById("lgfields").style.visibility = "visible"
} else {
document.getElementById("lgfields").style.visibility = "hidden"
};
}
</script>
<div>
<span class="col-xs-offset-5 col-sm-offset-10">Strange Cessation</span>
<span class="loginI">
<a onclick="switchFields()"><%= image_tag "login.png", class: "loginIcon loginImage" %></a>
</span>
<div id="login" class="col-sm-offset-10">
<div id="lgfields">
<%= render partial: "sessions/new" %>
</div>
</div>
</div>
<% else %>
<span>Strange Cessation</span>
<div class="navigation">
<a ui-sref="home">Home</a>
<a ui-sref="quotes">Quotes</a>
<a ui-sref="users">Users</a>
<%= link_to "Log out", logout_path, method: "delete" %>
</div>
<% end %>
</div>
</html>
奇怪的停止
$（文档）.ready（函数（）{
document.getElementById（“lgfields”）.style.visibility=“hidden”；
});
函数switchFields（）{
if（document.getElementById（“lgfields”）.style.visibility==“hidden”）{
document.getElementById（“lgfields”）.style.visibility=“可见”
}否则{
document.getElementById（“lgfields”）.style.visibility=“hidden”
};
}
奇怪的停止
奇怪的停止
家
引用
使用者
或者
奇怪的停止
这个问题有什么进展吗？
.state('quotes', { url: '/quotes', views: {'main': { templateUrl: 'quotes.html', controller: 'QuotesCtrl'}}})
<!DOCTYPE html>
<html>
<head>
<title>StrangeCessation</title>
<%= stylesheet_link_tag 'application', media: 'all' %>
<%= javascript_include_tag 'application'%>
<%= csrf_meta_tags %>
<meta name="viewport" content="width=device-width, intial-scale=1, maximum-scale=1">
</head>
<div class="section1">
<div class="heading">
<%= image_tag "HEADER.jpg", class: "himg" %>
</div>
</div>
<body ng-app="StrangeCessation">
<div class="container-fluid" ui-view="main">
<%= yield %>
<hr>
</div>
</body>
<div class="footer ">
<% if !logged_in? %>
<script>
$(document).ready(function () {
document.getElementById("lgfields").style.visibility = "hidden";
});
function switchFields() {
if(document.getElementById("lgfields").style.visibility == "hidden") {
document.getElementById("lgfields").style.visibility = "visible"
} else {
document.getElementById("lgfields").style.visibility = "hidden"
};
}
</script>
<div>
<span class="col-xs-offset-5 col-sm-offset-10">Strange Cessation</span>
<span class="loginI">
<a onclick="switchFields()"><%= image_tag "login.png", class: "loginIcon loginImage" %></a>
</span>
<div id="login" class="col-sm-offset-10">
<div id="lgfields">
<%= render partial: "sessions/new" %>
</div>
</div>
</div>
<% else %>
<span>Strange Cessation</span>
<div class="navigation">
<a ui-sref="home">Home</a>
<a ui-sref="quotes">Quotes</a>
<a ui-sref="users">Users</a>
<%= link_to "Log out", logout_path, method: "delete" %>
</div>
<% end %>
</div>
</html>
<!DOCTYPE html>
<html>
<head>
<title>StrangeCessation</title>
<%= stylesheet_link_tag 'application', media: 'all' %>
<%= javascript_include_tag 'application'%>
<%= csrf_meta_tags %>
<meta name="viewport" content="width=device-width, intial-scale=1, maximum-scale=1">
</head>
<body ng-app="StrangeCessation">
<div class="container-fluid" ui-view="main">
<%= yield %>
<hr>
</div>
</body>
</html>