angularjs - 嵌套 ui-gmap-markers 指令

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”属性？

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

<强> JSFiddle 使用 ng-repeat 的版本以及指令的单数版本 (ui-gmap-marker)

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

Answer 1

我设法使用 lodash 显示城市(依赖项已在 jsfiddle 中设置)。

这里 jsfiddle

这是编码:

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

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

希望对你有帮助