关于javascript:AngularJS:在不同的控制器中重用控制器功能和模板

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