嵌套 ui-gmap-marker 指令

Question

是否可以嵌套ui-gmap-markers指令（ui-gmap-marker的复数版本）？

例如，我有以下数据结构：

vm.states = [{
        id: 1,
        name: 'California',
        location: {
            latitude: 36,
            longitude: -119
        },
        cities: [{
        id: 1,
            name: 'Los Angeles',
            location: {
                latitude: 33.75,
                longitude: -118
            }
        }, {
        id: 2,
            name: 'San Francisco',
            location: {
                latitude: 38,
                longitude: -123
            }
        }, {
        id: 3,
            name: 'San Diego',
            location: {
                latitude: 32.5,
                longitude: -117
            }
        }]
    }, {
        id: 2,
        name: 'Nevada',
        location: {
            latitude: 39,
            longitude: -117
        },
        cities: [{
        id: 4,
            name: 'Las Vegas',
            location: {
                latitude: 36,
                longitude: -115
            }
        }, {
        id: 5,
            name: 'Reno',
            location: {
                latitude: 39,
                longitude: -119
            }
        }]
    }];

我想显示与每个州相关的城市，所以我希望有：

<ui-gmap-markers models="vm.states">
     <ui-gmap-markers>

如果可以，那么我将为嵌套指令中的"models"属性使用什么？

我已经能够使用带有ui-gmap-marker的ng-repeat来做到这一点。但是，我遇到了一些性能问题，因此我想使用该指令的复数版本。

JSFiddle 的版本使用 ng-repeat 与指令的单数版本 （ ui-gmap-marker ）

JSFiddle 的版本使用指令的复数版本 （ui-gmap-markers ）。请注意我想用于城市的嵌套ui-gmap-markers。我只是不知道如何从父级访问模型。

Answer 1

我设法使用 lodash 显示城市（依赖项已经在 jsfiddle 中设置）。

在这里斯菲德尔

这是编码：

    vm.cities = _.reduceRight(vm.states, function(listCities, other) {
  return listCities.concat(other.cities);
}, []);

您可以想象将此代码放在$watch()或watchCollection()

希望对您有所帮助

Answer 2

这是工作 jsfiddle： http://jsfiddle.net/kozlice/x1dfa74n/3/

$scope.data = [ /* ... */ ];
$scope.statesList = [];
$scope.citiesList = [];
$scope.$watch('data', function (newValue, oldValue) {
    $scope.statesList.length = 0;
    $scope.citiesList.length = 0;
    angular.forEach($scope.data, function (state) {
        $scope.statesList.push(state);
        if (!angular.isArray(state.cities)) {
            return;
        }
        angular.forEach(state.cities, function (city) {
            $scope.citiesList.push(city);
        });
    });
}, true);

对数据的任何更改（因为您很可能从服务器 API 获取数据）都将触发标记更新。

附言。存储数据是范围的责任，控制器不得用于此目的。还应避免隐式 DI 注释（有利于内联数组/$inject）。