1

标题有点模棱两可，但这就是问题所在。

假设我在 AngularJS 中工作，并且我有几个基本上需要相同逻辑的视图。

代码概述

应用程序.js

$routeProvider
.when('/sheet/:sheetid/:screenid', {
  templateUrl: 'views/sheet.html',
  name: 'sheets',
  controller: 'SheetCtrl'
});

索引.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 不能再使用该模型并且不会再次构建。

如果有人能指出我正确的方向，我会很高兴的。

4

2 回答 2

2

在父级中加载的部分继承父级控制器：

<div ng-controller="SheetCtrl" class="container" ng-view></div>
于 2013-06-18T14:52:36.167 回答
0

Here's what I eventually did. I included a view in the sheet-content according to a $scopevariable. I created 10 different views. In these 10 views I only changed the ng-controller element. All these views then ng-include another view which is shared across all 10 controllers.

I'm not totally happy about loading the data for the sheet in the sheet.js controller, but for now it seems the most DRY method of working. If I can think of a way to load this data in the corresponding sheet controller I'd rather do that.

sheet.js

This controls all of the sheets, contains shared functions and loads the data

$scope.template = {
  url: '/views/sheets/sheet' + $scope.sheetid + '.html'
};

sheet.html

This view simply loads the template provided above, looking at the sheetid

<div ng-include="template.url">

sheet1.html (goes on to sheet10.html)

Simply assigns the right controller so I can seperate my code

<div ng-controller="Sheet1Ctrl">
    <div ng-include="'views/sheets/sheet-wrapper.html'"></div>
</div><!--controller-->

sheet-wrapper.html

This view is shared across all sheets. Changing this view changes all the sheets

  <div class="mpj-factsheet-dynamic"></div>
于 2013-06-19T10:09:30.750 回答