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

时间:2013-06-18 12:16:32

标签: javascript angularjs frontend

标题是一个很大的暧昧,但这就是问题。

假设我在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不能再使用该模型,也不会再次构建。

如果有人能指出我正确的方向,我会对此感到非常高兴。

2 个答案:

答案 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>