所以我有一个Rails应用程序，我开始在AngularJS中添加前端。目前我可以使用AngularJS Batarang检查页面，我可以看到我的控制器的范围变量就好了。但是，当我使用{{variable}}语法或任何ng- *指令时，我看不到任何内容。我在控制台中没有错误，目前我感到非常困惑。
以下代码。
<%= content_for :main_content do %>
<div>
{{ god }}
</div>
<% end %>
<!DOCTYPE html>
<html ng-app="sigmanu">
<head>
<title>Sigma Nu - Epsilon Lambda</title>
<%= stylesheet_link_tag "application", :media => "all" %>
<%= javascript_include_tag "application" %>
<%= csrf_meta_tags %>
<%= favicon_link_tag 'favicon.ico' %>
</head>
<body ng-controller="MainCtrl">
<%= render :partial => "shared/navbar" %>
<div class="container">
<div class="row">
<div class="col-md-9">
<% flash.each do |key, value| %>
<%= content_tag(:div, value, class: "alert alert-info") %>
<% end %>
<%= yield :main_content %>
</div>
<div class="col-md-3">
<%= yield :side_content %>
</div>
</div>
<hr/>
</div>
<%= render :partial => 'shared/footer' %>
</body>
</html>
// This is a manifest file that'll be compiled into application.js, which will include all the files
// listed below.
//
// Any JavaScript/Coffee file within this directory, lib/assets/javascripts, vendor/assets/javascripts,
// or vendor/assets/javascripts of plugins, if any, can be referenced here using a relative path.
//
// It's not advisable to add code directly here, but if you do, it'll appear at the bottom of the
// the compiled file.
//
// WARNING: THE FIRST BLANK LINE MARKS THE END OF WHAT'S TO BE PROCESSED, ANY BLANK LINE SHOULD
// GO AFTER THE REQUIRES BELOW.
//= require jquery
//= require jquery_ujs
//= require jquery.ui.all
//= require bootstrap
//= require angular
//= require_self
//= require_tree .
var app = angular.module('sigmanu', [
]);
app.controller("MainCtrl", ["$scope", function ($scope) {
$scope.god = 'hi';
$scope.alert = "wait";
$scope.text = 'test';
}]);
/*
//= require angular-ui-calendar
//= require module
(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_US/all.js#xfbml=1";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
*/
// TODO: this should be temporary, remove when app is finished
$('.carousel').carousel('pause');
从服务器
<!DOCTYPE html>
<html ng-app="sigmanu">
<head>
<title>Sigma Nu - Epsilon Lambda</title>
<link href="/assets/fullcalendar.css?body=1" media="all" rel="stylesheet" type="text/css" />
<link href="/assets/active_admin.css?body=1" media="all" rel="stylesheet" type="text/css" />
<link href="/assets/article.css?body=1" media="all" rel="stylesheet" type="text/css" />
<link href="/assets/calendar.css?body=1" media="all" rel="stylesheet" type="text/css" />
<link href="/assets/categories.css?body=1" media="all" rel="stylesheet" type="text/css" />
<link href="/assets/home.css?body=1" media="all" rel="stylesheet" type="text/css" />
<link href="/assets/posts.css?body=1" media="all" rel="stylesheet" type="text/css" />
<link href="/assets/scaffolds.css?body=1" media="all" rel="stylesheet" type="text/css" />
<link href="/assets/shared.css?body=1" media="all" rel="stylesheet" type="text/css" />
<link href="/assets/topics.css?body=1" media="all" rel="stylesheet" type="text/css" />
<link href="/assets/user.css?body=1" media="all" rel="stylesheet" type="text/css" />
<link href="/assets/application.css?body=1" media="all" rel="stylesheet" type="text/css" />
<script src="/assets/jquery.js?body=1" type="text/javascript"></script>
<script src="/assets/jquery_ujs.js?body=1" type="text/javascript"></script>
<script src="/assets/jquery.ui.core.js?body=1" type="text/javascript"></script>
<script src="/assets/jquery.ui.widget.js?body=1" type="text/javascript"></script>
<script src="/assets/jquery.ui.accordion.js?body=1" type="text/javascript"></script>
<script src="/assets/jquery.ui.position.js?body=1" type="text/javascript"></script>
<script src="/assets/jquery.ui.menu.js?body=1" type="text/javascript"></script>
<script src="/assets/jquery.ui.autocomplete.js?body=1" type="text/javascript"></script>
<script src="/assets/jquery.ui.button.js?body=1" type="text/javascript"></script>
<script src="/assets/jquery.ui.datepicker.js?body=1" type="text/javascript"></script>
<script src="/assets/jquery.ui.mouse.js?body=1" type="text/javascript"></script>
<script src="/assets/jquery.ui.draggable.js?body=1" type="text/javascript"></script>
<script src="/assets/jquery.ui.resizable.js?body=1" type="text/javascript"></script>
<script src="/assets/jquery.ui.dialog.js?body=1" type="text/javascript"></script>
<script src="/assets/jquery.ui.droppable.js?body=1" type="text/javascript"></script>
<script src="/assets/jquery.ui.effect.js?body=1" type="text/javascript"></script>
<script src="/assets/jquery.ui.effect-blind.js?body=1" type="text/javascript"></script>
<script src="/assets/jquery.ui.effect-bounce.js?body=1" type="text/javascript"></script>
<script src="/assets/jquery.ui.effect-clip.js?body=1" type="text/javascript"></script>
<script src="/assets/jquery.ui.effect-drop.js?body=1" type="text/javascript"></script>
<script src="/assets/jquery.ui.effect-explode.js?body=1" type="text/javascript"></script>
<script src="/assets/jquery.ui.effect-fade.js?body=1" type="text/javascript"></script>
<script src="/assets/jquery.ui.effect-fold.js?body=1" type="text/javascript"></script>
<script src="/assets/jquery.ui.effect-highlight.js?body=1" type="text/javascript"></script>
<script src="/assets/jquery.ui.effect-pulsate.js?body=1" type="text/javascript"></script>
<script src="/assets/jquery.ui.effect-scale.js?body=1" type="text/javascript"></script>
<script src="/assets/jquery.ui.effect-shake.js?body=1" type="text/javascript"></script>
<script src="/assets/jquery.ui.effect-slide.js?body=1" type="text/javascript"></script>
<script src="/assets/jquery.ui.effect-transfer.js?body=1" type="text/javascript"></script>
<script src="/assets/jquery.ui.progressbar.js?body=1" type="text/javascript"></script>
<script src="/assets/jquery.ui.selectable.js?body=1" type="text/javascript"></script>
<script src="/assets/jquery.ui.slider.js?body=1" type="text/javascript"></script>
<script src="/assets/jquery.ui.sortable.js?body=1" type="text/javascript"></script>
<script src="/assets/jquery.ui.spinner.js?body=1" type="text/javascript"></script>
<script src="/assets/jquery.ui.tabs.js?body=1" type="text/javascript"></script>
<script src="/assets/jquery.ui.tooltip.js?body=1" type="text/javascript"></script>
<script src="/assets/jquery.ui.all.js?body=1" type="text/javascript"></script>
<script src="/assets/bootstrap/affix.js?body=1" type="text/javascript"></script>
<script src="/assets/bootstrap/alert.js?body=1" type="text/javascript"></script>
<script src="/assets/bootstrap/button.js?body=1" type="text/javascript"></script>
<script src="/assets/bootstrap/carousel.js?body=1" type="text/javascript"></script>
<script src="/assets/bootstrap/collapse.js?body=1" type="text/javascript"></script>
<script src="/assets/bootstrap/dropdown.js?body=1" type="text/javascript"></script>
<script src="/assets/bootstrap/tab.js?body=1" type="text/javascript"></script>
<script src="/assets/bootstrap/transition.js?body=1" type="text/javascript"></script>
<script src="/assets/bootstrap/scrollspy.js?body=1" type="text/javascript"></script>
<script src="/assets/bootstrap/modal.js?body=1" type="text/javascript"></script>
<script src="/assets/bootstrap/tooltip.js?body=1" type="text/javascript"></script>
<script src="/assets/bootstrap/popover.js?body=1" type="text/javascript"></script>
<script src="/assets/bootstrap.js?body=1" type="text/javascript"></script>
<script src="/assets/angular/angular.js?body=1" type="text/javascript"></script>
<script src="/assets/angular.js?body=1" type="text/javascript"></script>
<script src="/assets/application.js?body=1" type="text/javascript"></script>
<script src="/assets/active_admin/lib/namespace.js?body=1" type="text/javascript"></script>
<script src="/assets/active_admin/components/jquery.aa.checkbox-toggler.js?body=1" type="text/javascript"></script>
<script src="/assets/active_admin/components/jquery.aa.dropdown-menu.js?body=1" type="text/javascript"></script>
<script src="/assets/active_admin/components/jquery.aa.popover.js?body=1" type="text/javascript"></script>
<script src="/assets/active_admin/components/jquery.aa.table-checkbox-toggler.js?body=1" type="text/javascript"></script>
<script src="/assets/active_admin/pages/application.js?body=1" type="text/javascript"></script>
<script src="/assets/active_admin/pages/batch_actions.js?body=1" type="text/javascript"></script>
<script src="/assets/active_admin/application.js?body=1" type="text/javascript"></script>
<script src="/assets/active_admin.js?body=1" type="text/javascript"></script>
<script src="/assets/articles.js?body=1" type="text/javascript"></script>
<script src="/assets/calendar.js?body=1" type="text/javascript"></script>
<script src="/assets/controllers/main.js?body=1" type="text/javascript"></script>
<script src="/assets/home.js?body=1" type="text/javascript"></script>
<script src="/assets/module.js?body=1" type="text/javascript"></script>
<script src="/assets/posts.js?body=1" type="text/javascript"></script>
<script src="/assets/user.js?body=1" type="text/javascript"></script>
<meta content="authenticity_token" name="csrf-param" />
<meta content="cuJn2r99dy79UXvHuFvAJmgqc9bnv+iLKMTdC7qHNEk=" name="csrf-token" />
<link href="/assets/favicon.ico" rel="shortcut icon" type="image/vnd.microsoft.icon" />
</head>
<body ng-controller="MainCtrl">
<nav id="navbar" class="header navbar navbar-inverse" role="navigation" class="navbar navbar-inverse">
<div class="nav_container">
<ul class="nav navbar-nav clearfix">
<li class= margin-left-20 ><a href="/">Home</a></li>
<li class= ><a href="/about">About</a></li>
<li class= > <a href="/recruitment">Recruitment</a></li>
<li class= ><a href="/bios">Members</a></li>
<li class= ><a href="/alumni">Alumni</a></li>
<li class= ><a href="/dashboard">Dashboard</a></li>
<li class= >
<a href="/forums">Forum</a>
</li>
<li class= >
<a href="/articles">News</a>
</li>
<li class=active ><a href="/calendar">Calendar</a> </li>
</ul>
<ul id="userGravitar" class="nav navbar-nav clearfix pull-right">
<a href="http://en.gravatar.com/"><img alt="B03ddf03936496925d13e267c061b66c" class="avatar" src="http://www.gravatar.com/avatar/b03ddf03936496925d13e267c061b66c" /></a>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
cray
</a>
<ul class="dropdown-menu">
<li role="presentation">
<a href="/users/edit">Profile</a>
</li>
<li role="presentation">
<a href="/users/sign_out" data-method="delete" rel="nofollow">Sign out</a>
</li>
</ul>
</li>
</ul>
</div>
</nav>
<script type="text/javascript">
//TODO: figure out how to get rid of this hack
$.ready(function(){(".dropdown-toggle").dropdown();});
</script>
<div class="container">
<div class="row">
<div class="col-md-9">
<div>
{{ god }}
</div>
</div>
<div class="col-md-3">
</div>
</div>
<hr/>
</div>
<footer class="footer">
<br/>
<a href="https://www.facebook.com/pages/Sigma-Nu-Epsilon-Lambda/131659513620443"><img alt="Facebook" class="facebook-img" src="/assets/facebook.png" /></a>
<p class="inline">© Sigma Nu Epsilon Lambda 2014</p>
<a href="https://twitter.com/SigmaNu_Utah"><img alt="Twitter" class="twitter-img" src="/assets/twitter.png" /></a>
<hr class="small-width" />
<p>Sigma Nu - Epsilon Lambda Chapter 103</p>
<address>95 S Wolcott Street, Salt Lake City, UT, 84102</address>
<small>Built by <a href="http://www.bytenel.com">Ben Nelson</a></small>
</footer>
</body>
</html>
答案 0 :(得分：1)
Everythig似乎没问题我可能会发现你并没有真正显示部分，如果它呈现这种方式？，有一个javascript错误
{{ god }}
但是如果它只是渲染一个空白它应该正常工作。
请尝试制作相同的示例，但更改布局
<body ng-controller="MainCtrl">
{{ god }}
....
所以它不在任何部分内部。