2014-10-26 49 views
1

我(有一个MVC 5应用程序也使用angularjs和引导带在页面加载时的模态犯规发射和我在控制台中以下错误:。未被捕获的错误时加载页面

未捕获的错误: $ injector:modulerr] http://errors.angularjs.org/1.2.8/ $ injector/modulerr?p0 = myApp & p1 =错误%3A%2 ... .c%20(http%3A%2F%2Flocalhost%3A60248%2FScripts%2Fangular.min.js%3A17%3A431)

这里是我的html:

布局:

<!DOCTYPE html> 
<html ng-app ="myApp"> 
<head> 
<meta charset="utf-8" /> 
<meta name="viewport" content="width=device-width, initial-scale=1.0"> 
<title>Temujin @ViewBag.Title</title> 

<link href="~/Content/bootstrap.min.css" rel="stylesheet" type="text/css" /> 
<link href="~/Content/Site.css" rel="stylesheet" type="text/css" /> 
<script src="~/Scripts/modernizr-2.6.2.js"></script> 
<script src="~/Scripts/jquery-1.10.2.min.js"></script> 
<script src="~/Scripts/bootstrap.min.js"></script> 
<script src="~/Scripts/angular.min.js"></script> 
<script src="~/js/Login.js"></script> 
</head> 
<body> 
<div class="navbar navbar-inverse navbar-fixed-top"> 
    <div class="container"> 
     <div class="navbar-header"> 
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> 
       <span class="icon-bar"></span> 
       <span class="icon-bar"></span> 
       <span class="icon-bar"></span> 
      </button> 
      @Html.ActionLink("Temujin", "Index", "Home", null, new { @class = "navbar-brand" }) 
     </div> 
     <div class="navbar-collapse collapse"> 
      <ul class="nav navbar-nav"> 
      </ul> 
     </div> 
    </div> 
</div> 

<div class="container body-content"> 
    @RenderBody() 
    <hr /> 
    <footer> 
     <p>&copy; @DateTime.Now.Year - Temujin</p> 
    </footer> 
</div> 


</body> 
</html> 

指令模板:

<div class="modal fade"> 
<div class="modal-dialog"> 
    <div class="modal-content"> 
     <div class="modal-header"> 
      <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> 
      <h4 class="modal-title"></h4> 
     </div> 
     <div class="modal-body"> 
      <form class="form-signin" name="authForm" ng-submit="auth()" ng-controller ="AuthController" novalidate> 
       <input type="text" class="form-control" placeholder="user name" ng-model ="AuthController.user.username" required autofocus> 
       <input type="password" class="form-control" placeholder="password" ng-model ="AuthController.user.password" required> 
       <input type="submit" class="btn btn-primary" value="Submit" /> 
      </form> 
     </div> 
    </div><!-- /.modal-content --> 
</div><!-- /.modal-dialog --> 
</div><!-- /.modal --> 

CSHTML:

​​

angularjs:

(function() { 
    var temujin = angular.module('temujin', []); 

    temujin.controller('AuthModalController', ['$scope',function ($scope) { 
    $scope.temujin.user = {}; 
    console.log("AuthModalController ran"); 
    $scope.$(".modal").modal({ message: 'HEll0 World' }); 
    }]); 

temujin.directive("authModal", function() { 
    return { restrict: 'E', templateUrl: '\\js\\templates\\auth-modal.html', controller: 'AuthModalController',controllerAs: 'authmodalCtrl'} 
}); 

temujin.controller('AuthController',['$scope',function ($scope) { 
    $scope.user = {}; 
    console.log("AuthController ran"); 
    $scope.auth = function() { 
     console.log("user " + this.user); 

    }; 
}]); 
})(); 

MVC 5控制器:

using System; 
using System.Collections.Generic; 
using System.Linq; 
using System.Web; 
using System.Web.Mvc; 

namespace temujin.Controllers 
{ 
public class TemujinController : Controller 
{ 
    // 
    // GET: /Temujin/ 
    public ActionResult Index() 
    { 
     return View(); 
    } 
} 
} 

回答

2

您正在尝试使用该模块myApp在这里你的页面:

<html ng-app ="myApp"> 

但实际的模块被命名为temujin

你只需要改变你的ng-app指令指向正确的模块名称。

<html ng-app ="temujin">