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()

中

我希望它可以帮到你

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获取）将触发标记更新。

PS。存储数据的责任范围，控制器不得用于此目的。还应避免使用隐式DI注释（支持内联数组/ $注入）。

嵌套ui-gmap-markers指令

2 个答案: