3

是否可以嵌套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>

如果可以，那么嵌套指令中的“模型”属性将使用什么？

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

使用 ng-repeat 的版本的JSFiddleui-gmap-marker与指令的单数版本 ( )

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

4

2 回答 2

3

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

这里是 jsfiddle

这是编码：

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

你可以想象把这段代码放在一个$watch()或watchCollection()

希望对你有帮助

于 2015-03-11T03:23:41.570 回答
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 注释（支持内联数组/$inject）。

于 2015-03-15T04:26:49.697 回答