添加UI路由器后获得空白页面？

我是新来angularjs，我在我的应用程序，也UI路由器添加自定义指令，现在我得到空页没有什么是displayed.how我可以解决这个问题我真的会停留在这个问题。有人指导我？我刚刚在plunker上设置了我的应用程序，你可以在那里看到所有的代码。

Plunker：http://plnkr.co/edit/D5S2c6rgycWFfsyfhN9J?p=info

我得到了以下错误：

Uncaught ReferenceError: scotchApp is not defined 
homeDirective.js:2 Uncaught ReferenceError: scotchapp is not defined 
code.angularjs.org/1.2.13/angular.js:9503 
Error: [ng:areq] Argument  
'mainController' is not a function, got undefined

我的index.html：

<!DOCTYPE html> 

     <!-- define angular app --> 
     <html ng-app="scotchApp"> 

     <head> 
      <!-- SCROLLS --> 
     <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" /> 
     <link rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/4.0.0/css/font-awesome.css" /> 

     <!-- SPELLS --> 
     <script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script> 
     <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script> 
     <script src="http://code.angularjs.org/1.2.13/angular.js"></script> 
     <script src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.8/angular-ui-router.min.js"></script> 
     <script src="script.js"></script> 
      <script src="homeDirective.js"></script> 
     </head> 

      <!-- define angular controller --> 
     <body ng-controller="mainController"> 

      <nav class="navbar navbar-default"> 
      <div class="container"> 
      <div class="navbar-header"> 
      <a class="navbar-brand" href="/">Angular Routing Example</a> 
     </div> 

      <ul class="nav navbar-nav navbar-right"> 
      <li><a href="#"><i class="fa fa-home"></i> Home</a></li> 
      <li><a href="#about"><i class="fa fa-shield"></i> About</a></li> 
      <li><a href="#contact"><i class="fa fa-comment"></i> Contact</a></li> 
      </ul> 
     </div> 
     </nav> 

     <div id="main"> 

     <!-- angular templating --> 
     <!-- this is where content will be injected --> 
     <div ui-view></div> 

     </div> 

     <footer class="text-center"> 
       View the tutorial on <a href="http://scotch.io/tutorials/javascript/single-page-apps-with-angularjs-routing-and-templating">Scotch.io</a> 
     </footer> 

     </body> 

     </html>

来源

2015-08-25 Hassan

检查您的开发者控制台 – Ronnie

@Ronnie未捕获的ReferenceError：scotchApp没有定义 homeDirective.js：2未捕获的ReferenceError ：scotchapp未定义 code.angularjs.org/1.2.13/angular.js:9503错误：[ng：areq]参数'mainController'不是一个函数，得到了undefined它给出这些错误我不知道为什么？ – Hassan

请注意，错误显示2个“scotchApp”拼写。检查输入错误 – charlietfl

控制器缺少 对不起，我刚才编辑它

编辑

1）宣布了var var scotchApp = angular.module('scotchApp',['ui.router'])

2）在homeDirective变量名不匹配

var scotchApp = angular.module('scotchApp'); 
    scotchapp.directive('homeData', function() {

请参阅截图

来源

2015-08-25 16:39:08 maddygoround

指令不必有一个控制器。如果OP的意图与现在一样，可以从父项继承。这并不能说明问题，OP是有 – charlietfl

@maddygoround我仍然得到了同样的错误未捕获的ReferenceError：scotchApp没有定义（匿名函数）@的script.js：28个 homeDirective.js：2未捕获的ReferenceError：scotchapp没有定义（匿名函数） @ homeDirective.js：2 angular.js：9503错误：[ng：areq]参数'mainController'不是函数，没有定义 – Hassan

@maddygoround仍然没有显示 – Hassan

变种yourapp = angular.module（'yourapp'，['ui.router']）

添加瓦尔yourapp =固定我的问题似乎一切就好了工作，没有它，直到我开始添加指令

来源

2015-09-16 17:00:54 SLFEMP

请专门回答这个问题。谢谢 –

添加UI路由器后获得空白页面？

回答

相关问题