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

我已经创建了一个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)

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

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

I was doing this.

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

然后像这样创建控制器。

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

当我把它改成这个时，它开始工作了。

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

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

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

我知道AngularJS和AngularJS Material对于单页应用程序很好，但是我想使用一些函数来让我的应用程序看起来很好，并且按我想要的方式运行。

喜欢新手犯的错误

相关内容

最新更新

热门标签：