Question

我创建了一个MVC项目并添加了AngularJS-Material和所有必需的文件。我将AngularJS应用程序放在_Layout.cshtml页面上，因为我希望能够在整个项目中显示工具栏。

对于每个视图，我计划使用不同的控制器但是当我在新的脚本文件中引用控制器时，我收到一个错误，指出控制器未定义。

下面的代码工作正常，我遇到的唯一问题是当我尝试在代码的@RenderBody（）部分添加另一个视图时。在每个单独的chstml文件中，我定义了一个新的控制器，但保留了相同的应用程序。

这是我的布局文件：

<!DOCTYPE html>
<html ng-app="bPST" ng-controller="layoutCtrl">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>@ViewBag.Title - My ASP.NET Application</title>
    @Styles.Render("~/Content/css")
    @Scripts.Render("~/bundles/modernizr")
<link href="~/Content/angular-material.min.css" rel="stylesheet" />

<script src="~/Scripts/angular.js"></script>
<script src="~/Scripts/angular-animate.js"></script>
<script src="~/Scripts/angular-aria.js"></script>
<script src="~/Scripts/angular-messages.js"></script>
<script src="~/Scripts/angular-material/angular-material.js"></script>
<script src="~/Ang_Scripts/bpst.js"></script>

</head>
<body>
  <div layout="column" layout-fill>
    <md-toolbar>
        <div class="md-toolbar-tools">
            <span>Title </span>
            <!-- fill up the space between left and right area -->
            <span flex></span>
            <md-button ng-click="sideBarFunctions()">Menu</md-button>
        </div>
    </md-toolbar>

    <md-sidenav ng-cloak class="md-sidenav-left md-whitefram-z2" md-component-id="left" md-is-open="sideBarOpen">
        <div layout="column" layout-align="space-around stretch">
            <md-toolbar>
                <h2 style="text-align: center;">Menu</h2>
            </md-toolbar>
            <md-content layout-padding layout="column" layout-align="start">
            </md-content>
        </div>
    </md-sidenav>
    <md-content>
        <div class="container body-content">
            @RenderBody()
        </div>
    </md-content>
</div>
<hr />
<footer>
    <p>&copy; @DateTime.Now.Year - My ASP.NET Application</p>
</footer>
@Scripts.Render("~/bundles/jquery")
@*@Scripts.Render("~/bundles/bootstrap")*@
@RenderSection("scripts", required: false)

login.js：

var bApp = angular.module('bPST', ['ngMaterial']);
bApp.controller('loginCTRL',function($scope) {

$scope.message = "Login";
});

Answer 1

所以问题更多的是我在js文件中创建应用程序的方式。

我这样做。

var bPSTApp = angular.module('bPST', ['ngMaterial']);

然后像这样创建控制器。

bPSTApp.controller('layoutCtrl', function ($scope) {
//Add coding here

};

当我将其更改为此时，它开始工作。

angular.module('bPST').controller('layoutCtrl', function ($scope) {
//Add coding here
});

现在我需要做的就是在每个控制器文件中引用App，而不是尝试引用我在主JS文件中设置的变量。

此外，由于我在登录cshtml文件中使用login.js，因此仅在该视图中引用它。

我确实认为AngularJS和AngularJS Material适用于单页应用程序，但是我想要使用的功能使我的应用程序看起来很好并且按照我想要的方式运行。

喜欢新手的错误。

如何在多个MVC脚本文件中使用相同的AngularJS控制器？

1 个答案: