AngularJS : Re-use controller functions and templates in different controllers
标题有点含糊不清,但这就是问题所在。
假设我在安古拉吉斯工作,我有几个观点在很大程度上需要相同的逻辑。
代码概述App.JS
1 2 3 4 5 6 | $routeProvider .when('/sheet/:sheetid/:screenid', { templateUrl: 'views/sheet.html', name: 'sheets', controller: 'SheetCtrl' }); |
索引文件
1 |
The shared controller现在这是我脑海中所有事情的一部分。我需要这个控制器来处理所有10张纸。现在,我正在通过一个目前有效的服务加载工作表的数据/模型。但问题是,每一张床单都有很多代码,但它们也可以彼此不同。
例如:
共享控制器.js
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | 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不同。我想将特定于Sheetd的控制器逻辑分配给Sheet内容,并为Sheet内容提供它自己的模板/视图。
1 2 3 4 | close <!-- Assume sheet specific controller code to target this div--> |
现在怎么办?
不太确定如何从这里继续。似乎我应该能够以某种方式动态地将特定Sheetd的控制器逻辑分配给Sheet Content Div,并在这里分配模板。我真的在寻找尽可能干净和干燥的方法。
例如,我可以复制/粘贴视图和SharedController 10次,并将它们分配给每个可能的路径,但我确实不想重复自己的操作。
另一个问题是,每个工厂都应该以某种方式建立自己的模型。现在,我正在通过一个带有预定义数据的服务来完成这项工作,但是如果特定的控制器正在处理这些数据,这将是最干净的。问题是,当我把这个逻辑放到特定的控制器中时,共享控制器就不能再使用这个模型,也不会再构建。
如果有人能给我指出正确的方向,我会很高兴的。
在父级继承父控制器中加载的分区:
1 |
这就是我最终所做的。我根据$scopevariable在工作表内容中包含了一个视图。我创建了10个不同的视图。在这10个视图中,我只更改了ng控制器元素。然后,所有这些视图ng都包括在所有10个控制器之间共享的另一个视图。
我对在sheet.js控制器中加载工作表的数据并不完全满意,但目前看来这似乎是最枯燥的工作方法。如果我能想到将这些数据加载到相应的工作表控制器中的方法,我宁愿这样做。
片材JS
它控制所有工作表,包含共享函数并加载数据
1 2 3 | $scope.template = { url: '/views/sheets/sheet' + $scope.sheetid + '.html' }; |
片语
此视图只加载上面提供的模板,查看板材
1 |
sheet1.html(转到sheet10.html)
只需分配正确的控制器,这样我就可以分离代码
1 | <!--controller--> |
包装纸.html
此视图在所有工作表中共享。更改此视图将更改所有工作表
1 |