Fatal编程技术网
  • javascript/
  • Javascript 什么会导致Angular无法无错误地渲染？

Javascript 什么会导致Angular无法无错误地渲染？

javascript ruby-on-rails angularjs debugging

Javascript 什么会导致Angular无法无错误地渲染？,javascript,ruby-on-rails,angularjs,debugging,angularjs-scope,Javascript,Ruby On Rails,Angularjs,Debugging,Angularjs Scope,所以我有一个Rails应用程序，我开始在前端添加AngularJS。目前，我可以使用AngularJS Batarang检查页面，我可以很好地看到控制器的作用域变量。然而，当我使用{variable}}语法或任何ng-*指令时，我看不到任何东西。我在控制台中没有任何错误，目前相当困惑 代码如下 <%= content_for :main_content do %> <div> {{ god }} </div> <% end %> 从服务器

所以我有一个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>
  <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>


西格玛努-ελ

    

  • 













    

  • 

      

    • 

      • 

    • 

      • 

    

    • 


//TODO:想办法摆脱这个黑客
$.ready（函数（）{（“.dropdown toggle”）.dropdown（）；}）；
{{{上帝}}





©；Sigma Nu Epsilon Lambda 2014



Sigma Nu-ελ第103章
每件事看起来都很好，我可能觉得您没有真正显示部分，如果它以这种方式呈现，则会出现javascript错误

{{ god }}
但是，如果它只是呈现一个空白，它应该可以工作

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

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


{{{上帝}}
....
所以它不在任何部分中。

我不知道多少abiuf rails，但它是否也使用
{{
}进行模板化？可能是rails在将其发送到浏览器之前试图替换
{{{god}}}`的情况吗？客户端中的HTML是什么样子的？HTML看起来很正常：{{god}打开DevTools网络，检查从服务器获取的HTML文档的内容。它看起来像什么？一样，看起来很正常。我会用它发布一个编辑。这真的很奇怪。如果我是你的话，我会尽力去做。将它直接放在HTML中（不作为部分“屈服”）或2。使用
，看看会发生什么。（我知道这不是很好的建议，但我会这么做：））这实际上是可行的，当我将它移出部分时，它会显示正确的变量。是什么原因造成的？我如何调试它？太奇怪了…这似乎是一个css属性，您可能在其中设置了
display:none
或者rails有问题，尝试渲染随机文本`一些随机文本{{{god}}}我只得到“一些随机文本”，然后在它下面我得到“{{god}” 
{{ god }}

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