javascript - 什么可能导致 Angular 无法正常渲染？

标签 javascript ruby-on-rails angularjs debugging angularjs-scope

所以我有一个 Rails 应用程序，并且我开始为前端添加 AngularJS。目前我可以使用 AngularJS Batarang 检查页面，并且可以很好地看到 Controller 范围的变量。但是，当我使用 {{ 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">&copy; 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>

最佳答案

一切看起来都不错，我可能会认为你并没有真正显示部分，如果它以这种方式呈现？，有一个 javascript 错误

{{ god }}

但如果它只是呈现空白，它应该可以工作。

请尝试制作相同的示例，但更改布局

<body ng-controller="MainCtrl">
  {{ god }}
 ....

所以它不在任何部分内。

关于javascript - 什么可能导致 Angular 无法正常渲染？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/23821985/

上一篇：javascript - JavaScript 中的 bool 标志未正确检查

下一篇：javascript - 如何在没有 javascript 或 headers 的情况下在 PHP 中重定向

相关文章：

javascript - 相对位置父级内垂直居中的绝对位置 div - 在 Chrome 中工作，但在 Safari 等中以主体为中心？

javascript - 如何通过邮件退回尸体？ MailApp.sendEmail() 错误

ruby-on-rails - Jobs with Resque gives "Don' t know how to build task 'jobs:work' "on Heroku

javascript - AngularJS 中算术运算符的问题

css - 如何正确地用CSS和AngularJS模拟移动应用幻灯片 View ？

javascript getElementsByTagName 排除某些标签

javascript - 通过 Javascript 在点击时更改 Accordion 颜色

ruby-on-rails - 如何使用 Active Support 核心扩展

ruby-on-rails - 预加载自引用多态关联

javascript - Angular 中的函数调用后表失去排序

©2024 IT工具网  联系我们