繁体   English   中英

加载页面时出现未捕获的错误

[英]Uncaught Error when loading page

我(有一个也使用angularjs和引导带的MVC 5应用程序。当页面加载时,模态不启动,并且我在控制台中得到以下err:

未捕获的错误:[$ injector:modulerr] http://errors.angularjs.org/1.2.8/ $ injector / modulerr?p0 = myApp&p1 = Error%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:

@{
ViewBag.Title = "Login";
Layout = "~/Views/Shared/_Layout.cshtml";
}

<h2></h2>
<div id="loginBox">
  <auth-modal></auth-modal>
</div>

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();
    }
}
}

您正在尝试在此处的页面中使用模块myApp

<html ng-app ="myApp">

但是您的实际模块名为temujin

您只需要更改ng-app指令以指向正确的模块名称即可。

<html ng-app ="temujin">

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM