【发布时间】：2014-06-25 17:21:32
【问题描述】：
提前为一个很长的问题道歉，我希望你们中的一些人能解决这个问题。
我刚刚开始使用 Angular，到目前为止我很喜欢它，并且在“2014 年的伟大重写”之前，我们已经能够快速地对我们当前应用程序中的一些功能进行原型制作。但在我们将皮革变成 Angular 之前，我想确保我的架构是正确的，而我的困惑之一是控制器层次结构和/或继承。
我们的应用程序目前被划分为逻辑上独立的页面，并且有一个包含不同通用实体负载的数据库。许多页面在结构上彼此相似，并且通常一个页面只处理一种类型的实体。为简单起见，我们假设它是一个电影院预订系统......
假设当前有一个页面显示电影院的所有当前电影，数据来自数据库中的 Movie 实体，并且这些电影以表格的形式呈现给用户。该表显示了电影的各种属性（年龄分级、长度、演员等）。当用户点击一部电影时，他们会被带到放映页面，在一个非常相似的表格中显示有关放映实体的信息（时间、可用座位等）。
起初，我可能会考虑根据用户访问的逻辑“页面”来划分我的模块/控制器，可能是这样的：
var app = angular.module('MyCinema', ['Movies', 'Screenings']);
var movies = angular.module('Movies', []);
movies.controller('movieCtrl', function() {});
movies.controller('movieTableCtrl', function() {
// ... do lots of stuff related to the movie table
});
var screenings = angular.module('Screenings', []);
screenings.controller('screeningCtrl', function() {});
screenings.controller('screeningTableCtrl', function() {
// ... do lots of stuff related to the screening table
});
...实际上，我会将它们放在各自的闭包中，放在单独的文件中，但为简洁起见，这样就可以了。
在 HTML 中...
<html ng-app="MyCinema">
<section ng-controller="movieCtrl">
<!-- movie related stuff -->
<table ng-controller="movieTableCtrl"></table>
</section>
<section ng-controller="screeningCtrl">
<!-- screening related stuff -->
<table ng-controller="screeningTableCtrl"></table>
</section>
</html>
不管怎样，我很快意识到“做电影台相关的事情”和“做放映台相关的事情”几乎是相同的。我找到了这个问题/答案：Can an AngularJS controller inherit from another controller in the same module? 并实现了这样的东西：
var app = angular.module('MyCinema', ['Movies', 'Screenings']);
app.controller('tableCtrl', function() {
// ... do MOST stuff related to all tables
});
var movies = angular.module('Movies', []);
movies.controller('movieCtrl', function() {});
movies.controller('movieTableCtrl', function($scope) {
$controller('tableCtrl', {$scope: $scope});
// ... do a little bit more stuff related to the movie table
});
var screenings = angular.module('Screenings', []);
screenings.controller('screeningCtrl', function() {});
screenings.controller('screeningTableCtrl', function($scope) {
$controller('tableCtrl', {$scope: $scope});
// ... do a little bit more stuff related to the screening table
});
这行得通，控制器有点继承，HTML 保持不变，控制器位于 DOM 的正确部分以及逻辑分离的模块中，但是......我不知道，“继承”似乎并不干净，它看起来不像是 Angular 想要我做的事情。感觉 Angular 实际上 想让我做这样的事情：
var app = angular.module('MyCinema', ['Movies', 'Screenings']);
app.controller('tableCtrl', function() {
// ... do MOST stuff related to all tables
});
app.controller('movieTableCtrl', function($scope) {
// ... do a little bit more stuff related to the movie table
});
app.controller('screeningTableCtrl', function($scope) {
// ... do a little bit more stuff related to the screening table
});
在 HTML ...
<section ng-controller="movieCtrl">
<!-- non-table movie stuff -->
</section>
<section ng-controller="screeningCtrl">
<!-- non-table movie stuff -->
</section>
<div ng-controller="tableCtrl">
<table ng-controller="movieTableCtrl"></table>
<table ng-controller="screeningTableCtrl"></table>
</div>
所以现在我不必传递 $scopes 来让它工作（范围在 DOM 中是隐式正确的）并且 JS 代码看起来也更干净，IMO。但是 HTML 并没有很好地表达表格内容与其他部分的关系。
恭喜并感谢您解决了我的问题。我现在的问题很简单，其中哪一种是首选风格，或者它们都很糟糕？我错过了第三个更好的方法吗？
tldr; 将控制器放在单独的模块逻辑模块中是否更好，保持 DOM 在逻辑上分离，然后尝试在 JS 中使控制器相互继承......或者它最好让 DOM 指定继承，并在 JS 中牺牲一些逻辑分离......或者，别的什么？
干杯！！
【问题讨论】：
-
那个悲伤的时刻，当你读了一个好长的问题，当你读完你才意识到它从来没有得到回答......
标签： angularjs inheritance model-view-controller