Angularjs 管理控制器层次结构之间的数据流

我的应用程序有一部分在3个单独的页面之间共享信息。我有一个抽象的“Order”控制器，每当它的子对象被实例化时，它就会被实例化。子项是“概述”、“警报”和“帐户”。因此，我的视图/控制器层次结构如下所示

                                   Order
                                   / |  \
                                  /  |   \
                                 /   |    \
                                /    |     \
                               /     |      \
                          Overview  Alerts  Accounts

在这三个页面的顶部，我显示了一些“订单”级别的信息，比如客户名称，因此我在“订单”控制器中进行API调用，以便可以在任何页面上使用它。问题是我想保持我的惯例，将我的所有API数据粘贴到一个“model”对象中，比如

$scope.model

。我试图在我的“概述”控制器中使用

angular.extend

来扩展此控制器的

$scope.model

，使用存在于“Order”控制器中的

$scope.model

，问题是

angular.extend

在返回API调用之前执行，因此我基本上只是扩展一个从未实际填充API数据的空白对象

我的解决方案是使用角度事件从父对象触发到子对象，以便在API调用完成后扩展对象。我的代码如下所示：

订单控制器

$scope.model = new OrderModel();

    API.Backups.getBackupService({ id: $stateParams.orderId }, function (data) {
        $scope.model.BackupService.data = data.result;
        $scope.$broadcast('parentDataReceived', $scope.model.BackupService.data);
    });

$scope.model = new OverviewModel();

    $scope.$on('parentDataReceived', function (event, data) {
        angular.extend($scope.model.BackupService.data, data);
    });

概览控制器

$scope.model = new OrderModel();

    API.Backups.getBackupService({ id: $stateParams.orderId }, function (data) {
        $scope.model.BackupService.data = data.result;
        $scope.$broadcast('parentDataReceived', $scope.model.BackupService.data);
    });

$scope.model = new OverviewModel();

    $scope.$on('parentDataReceived', function (event, data) {
        angular.extend($scope.model.BackupService.data, data);
    });

这很有效，但我认为这不是最好的解决办法。这个问题以前是以更优雅的方式解决的还是我的方式解决的

---

那么，更正确的解决方案是什么呢

app.factory('OrderService', function() {
  var OrderService = {};
  var order = {};

  OrderService.getOrder = function(id) { //send API call to get order information via OrderID }
  OrderService.updateOrder = function(order) { //send API to PUT the new order information to the server }
  OrderService.Current = order;

  return OrderService;
});

---

你把事情搞错了。您不需要从控制器发出REST呼叫，然后在收到数据时将数据推送到模型中（有效地将数据从控制器推送到服务）

相反，您可以通过控制器的$scope将视图绑定到服务的数据，并让数据从服务流经控制器的$scope，然后流到视图中

为此，请创建Orders服务，然后将控制器的$scope（例如$scope.model.order）上的属性分配给此Orders服务的currentOrder属性。然后，当接收到数据时，只需将其分配给Orders服务中的currentOrder属性

因为控制器的$scope.model.order属性引用（即“绑定到”）与Orders.currentOrder相同的对象，所以$scope.model.order和视图（即HTML）也将立即更新

在你的例子中，你会有这样的情况：

控制器 订单服务 独立API服务 请注意，您经常会读到控制器应该是模型和视图之间的“粘合剂”，但在有角度的土地上这意味着什么并不总是显而易见的

---

简单地说，控制器应该只包含对$scope的赋值。如果控制器中有一个函数包含业务逻辑，或对最终分配给$scope的数据进行操作或转换，请将该函数放在服务中。

您的

Order

对象肯定应该是服务。你能不能设置一个小的演示，这样我可以更有效地帮助你？我总是听说事情应该是服务，但我只是不明白如何在我的控制器逻辑中绑定它。我觉得我们需要在整个应用程序中都这样做。控制器中不应放置任何逻辑。他们需要尽可能的瘦。他们的目标是成为模型和视图之间的粘合剂。您的模型应该在控制器的servicesNo逻辑中？我认为这就是控制器的全部意义。那么，您能给我介绍一个使用服务作为模型的示例吗？我现在不能做更多了，我在我的智能手机上。Rgds

.factory('API', ['$http', function($http){

    var service = {
        getBackupServiceData: getBackupServiceData;
    };

    return service;

    ////////////

    function getBackupServiceData(){
        // Return $http's promise
        return $http.get({ id: $stateParams.orderId }, function (data) {
            // transform data if needed
            return data;
        },
        function(response){
            // handle error
        }
    });

}])