标题是一个很大的暧昧,但这就是问题。
假设我在AngularJS工作,并且我有几个主要需要相同逻辑的视图。
app.js
$routeProvider
.when('/sheet/:sheetid/:screenid', {
templateUrl: 'views/sheet.html',
name: 'sheets',
controller: 'SheetCtrl'
});
的index.html
<div class="container" ng-view></div>
共享控制器 现在,这是我脑海里浮现的部分。我需要这个控制器来处理所有10张纸。现在我正在通过一项服务加载工作表的数据/模型,该服务目前正在运行。但事实是,每个sheetid都会分享很多代码,但它们也可以彼此不同。
例如:
sharedController.js
angular.module('App')
.controller('SheetCtrl', function ($scope, $routeParams, sheets) {
$scope.sheetid = $routeParams.sheetid;
/** GET THE SHEET */
//Gets the correct model from the sheets service (via promise)
$scope.sheetData = sheets.getSheet($scope.sheetId);
/** FACTSHEET SPECIFIC LOGIC */
//TODO: Figure out how to load specific factsheet controls in here
/* THE LOGIC FOR ALL THE SCREENS. WE NEED THIS AT ALL TIMES */
$scope.setScreen = function(index) {
...
};
//there are some more functions here that need to be shared
});
每个工作表都必须在同一个模板中解析。问题是,即使这些模板也可以有微小的位,只有一个嵌套在这个模板中的div。我想将sheetID特定的控制器逻辑分配给工作表内容,并且还为工作表内容提供它自己的模板/视图。
<div class="sheet">
<div>
<a href="/#/" class="close">close</a>
</div>
<div class="sheet-content">
<!-- Assume sheet specific controller code to target this div-->
</div>
</div>
不太确定如何从这里继续。看起来我应该能够以某种方式动态地将特定sheetID的控制器逻辑分配给sheet-content div并在此处分配模板。我真的在寻找干净和干燥的方法。
例如,我可以复制/粘贴视图和sharedController 10次并将它们分配给每个可能的路径,但我真的不想重复自己。
另一个问题是每个资料单应该以某种方式建立自己的模型。现在我通过具有预定义数据的服务来完成它,但如果特定控制器正在处理它,它将是最干净的。问题是,当我将该逻辑放在特定的控制器中时,sharedControllers不能再使用该模型,也不会再次构建。
如果有人能指出我正确的方向,我会对此感到非常高兴。
答案 0 :(得分:2)
在父继承父控制器中加载的部分:
<div ng-controller="SheetCtrl" class="container" ng-view></div>
答案 1 :(得分:0)
这是我最终做的。我根据$ scopevariable在工作表内容中包含了一个视图。我创建了10个不同的视图。在这10个视图中,我只更改了ng-controller元素。所有这些视图然后包括另一个视图,它在所有10个控制器之间共享。
我对在sheet.js控制器中加载工作表的数据并不十分满意,但是现在它似乎是最干的工作方法。如果我能想出一种在相应的纸张控制器中加载这些数据的方法,我宁愿这样做。
<强> sheet.js 强>
它控制所有工作表,包含共享功能并加载数据
$scope.template = {
url: '/views/sheets/sheet' + $scope.sheetid + '.html'
};
<强> sheet.html 强>
此视图只是加载上面提供的模板,查看sheetid
<div ng-include="template.url">
sheet1.html (转到sheet10.html)
只需分配正确的控制器,以便我可以分离我的代码
<div ng-controller="Sheet1Ctrl">
<div ng-include="'views/sheets/sheet-wrapper.html'"></div>
</div><!--controller-->
<强>片wrapper.html 强>
此视图在所有工作表中共享。更改此视图会更改所有工作表
<div class="mpj-factsheet-dynamic"></div>