Question

对于仪表板类型项目（一页，不同模型的多个较小视图），我们正在使用Angular框架中的其他工具。

问题包括以下内容：

我有一个控制器，负责检索工作项数据。目前，工作项数据包括bugamount和backlogitems。
我在此控制器中有2个函数负责更新范围变量（bugAmount和backLogItems）
我有2个html文件作为视图。这些包含在主dashboard.html中（基本上是一个随机的地方）。

我现在遇到的问题是视图不共享一个共同的祖先，它具有链接到workItemController的controller指令。我可以做到这一点，它可以完美地工作，但这会严重降低布局的可能性。

基本上是问题：每个视图现在都有ng-controller属性，因为它们都需要访问范围。这不起作用，只有一个视图得到更新。

作为参考，这两个div应该能够位于页面的任何位置，并且应该可以访问它们的共享数据（ontroller提供）

<div class="backLogView" ng-controller="WorkItemsController">
...
                    <tr data-ng-repeat="b in backLogItems">
                        <td class="text-left">{{b.title}}</td>
                        <td class="text-left">{{b.status}}</td>
                        <td class="text-left">{{b.assignedTo}}</td>
                    </tr>

 ...
</div>

<div class="bugAmountView" ng-controller="WorkItemsController">
...
{{BugAmount}}   
 ...
</div>

到目前为止，我一直在考虑：

创建使用ng-controller指令的共同父项，而不是在单独的视图中。这是一个选项，但会严重减少视图的位置（就我而言，这是一个很大的禁忌）
使用$ rootscope作为控制器，用于发布将当前范围更新为$ rootscope.workitems ..这可能会起作用，但意味着每个控制器都可以访问每个其他控制器数据。

是否有一种很好的方法可以在一个控制器中保持链接功能（应该如此），但是在它们没有共同祖先的网页中显示其数据（bugamount和backlog）的视图。

Answer 1

您可以考虑使用可以注入每个控制器的服务。由于服务本质上是一个单独的服务，因此该服务中包含的数据将在控制器之间共享。

您甚至可以将其分配给控制器的本地$ scope。

e.g。

var YourApp = angular.module['YourAppName'];

YourApp.factory('YourServiceName', [function(){
    return {
        var1: '',
        var2: '',
        var3: ''
}]);

因此，在您的控制器中，您可以注入'YourServiceName'。您可以将数据分配给属性，并且可以在也注入了服务的其他控制器中访问它们。如果您添加到$ scope，更改将反映在您的视图中。

所以，对于'WorkItemsController'，你可以有类似的东西：

YourApp.controller('WorkItemsController', ['$scope', 'YourServiceName', function($scope, YourServiceName){
    $scope.ServiceData = YourServiceName;
}]);

因此，在您的观看中，您可以访问ServiceData.var1等，如果此数据通过服务在其他位置更新，则应自动反映在您的视图中。

通过这种方式，您可以在范围之间共享数据，而无需依赖共享父级或使用$ rootscope。

使用该服务，您甚至可以将用于检索原始数据的功能移动到服务中并将其保存在一起。数据检索仍然可以由控制器触发，但是通过对服务的方法调用，服务更新自己的属性，这些属性可以在视图中访问。

Answer 2

我正在增加另一种可能性。如果要动态刷新视图，服务答案将不会这样做。您必须使用事件：$ emit / $ broadcast，以便您可以刷新所有依赖于这些数据的视图。

查看Working with $scope.$emit and $scope.$on了解详情。

Angular JS控制器范围，多个视图

2 个答案: