AngularJS MVC Razor - 如何在多个文件中定义一个控制器？答案

【问题标题】：AngularJS MVC Razor - How does one define a single controller in multiple files?AngularJS MVC Razor - 如何在多个文件中定义一个控制器？
【发布时间】：2017-03-06 19:05:53
【问题描述】：

我有一个 MVC 应用程序，它有一个主布局，其中有一个 @RenderBody() 来呈现单个页面的正文。在主布局中，我为 body 标签指定了 angularjs 应用名称和控制器名称。

我希望在单独的全局 angular.js 文件中定义控制器。这将共享每个页面都可以利用的通用功能。

 myApp.controller('myController', ['$scope', '$http', function ($scope, $http) {    
          $scope.sharedFunction = //...shared function stuff
})';

我还想在 MVC 的子页面中添加特定的作用域函数和变量。当我到达子页面时，如果我使用相同的语法，我相信我最终会重新定义控制器。

myApp.controller('myController', ['$scope', '$http', function ($scope, $http) {    
      $scope.showOverlay = false;
}]);

我怎样才能使在正文中定义的同一控制器在使用@RenderBody() 呈现的子页面中获得添加到它的页面特定项？

【问题讨论】：

这不是 ASP.NET MVC 的问题。您需要相应地设置您的 Angular 代码。见：docs.angularjs.org/guide/controller#scope-inheritance-example

标签： javascript angularjs asp.net-mvc razor

【解决方案1】：

您需要在 Angular 中将“应用程序”定义为模块，如下所示：

var app = angular.module("app", [myController])

声明的第二部分允许您传入 Angular 应用所依赖的“依赖项”数组。在这种情况下，您的应用将包含您的“myController”控制器

然后在您希望 Angular 操作的 html 部分使用此属性：

ng-app="app"

这样做将使您的控制器可用于任何使用您的“应用”模块的页面。

【讨论】：

所以可以说我在一个总是被导入的脚本文件中定义了主控制器。我导入它并设置您为该页面显示的依赖项。然后如何将 $scope.showOverlay = false 添加到该控制器，该控制器仅存在于我所在的页面而不是全部？使用该脚本的所有其他页面都可以访问 $scope.sharedFunction 但不能访问覆盖，因为它只添加在一个页面上。

【解决方案2】：

我通过嵌套 ng-controllers 来实现这一点。第二个控制器继承了第一个控制器的所有功能，我能够覆盖它们并将它们添加到第二个控制器中。

【讨论】：