Lodash & Angular：将 JSON 对象转换为视图模型

Question

我正在尝试找到将大型 JSON 对象转换为视图模型的最佳方法。以前，我将模型合并到视图中，这是一种不好的做法。所以，现在我在控制器内部生成了模型。我正在使用 Lodash 作为实用程序库。

我当前的设计计划是将 JSON 对象转换为可在控制器范围内访问的“主”数组。 JSON 文件由 Express 提供。 ModelService 只需获取此文件以使其在控制器中可用。

$scope.arr 是我想在视图中使用的“主”数组。

我还使 JSON 数据可用于在外部链接中查看，因为它是如此之大。 Here it is.

(function() {
    'use strict';

    angular
        .module('app')
        .controller('ModelController', ModelController);

    function ModelController($scope, ModelService, _) {
        $scope.jsonData = ModelService.getAll();

        $scope.getData = function() {
            $scope.jsonData.$promise.then(function(data) {
                $scope.all = data;
                $scope.arr = [];
                _.mapValues($scope.all.parent1.clusters, function(cluster) {
                    $scope.arr.push(cluster.name);
                    _.mapValues(cluster.subclusters, function(subcluster) {
                        $scope.arr.push(subcluster.name);
                        _.mapValues(subcluster.entities, function(entity) {
                // map entities
                        })
                    });
                });
            });
        };

        $scope.getData();
    }
})();

此代码只是将 cluster 和 subcluster 名称添加到数组中。我希望将子集群映射到它们的父集群。我这样做的想法是将每个cluster 元素转换为它自己的数组，然后添加子集群，然后将每个子集群转换为一个数组，以便将实体映射到它们。这似乎乏味且效率低下。所以，我正在寻找一种更好的方法来实现这一目标。

如果我可以一举将每个集群对象添加到数组中，而无需所有映射并将对象转换为数组，那就太好了。这可能吗？

线框视图看起来像this。 Flex Cluster Title 是subcluster 的名称，其中的每个数字都是一个entity。

Answer 1

首先，我会将这个处理转移到服务中。它更易于测试，并使您的视图与模型分开（控制器实际上是 Angular 的“视图”IMO 的更多部分，特别是如果您正在考虑将来升级到 Angular 2.0）。

在 Angular 中，我认为解决这个问题的适当方法是使用与 ng-repeat 结合的组件（或指令）。

页面模板：

<!-- Page template, assume $ctrl is your controller, $ctrl.clusters is the data -->
<cluster ng-repeat = "cluster in $ctrl.clusters"
         cluster-data="cluster" >
</cluster>

集群指令模板：

<!-- Assume $ctrl is the controller for the cluster directive, $ctrl.cluster is the cluster object. -->
<div class="name">{{$ctrl.cluster}}</div>
<div class="subClusterNames" 
     ng-repeat="subCluster in $ctrl.cluster.subClusters>
     {{subCluster.name}}
</div>

您可能认为这将您的数据与视图的映射过于紧密，但是只要您使用组件来显示您的数据（即，不要将它们全部放入一个模板中）我觉得你会没事的。