Angular + D3 - Получить значения области для отображения в шаблоне из события щелчка

Question

Я работаю над картографическим приложением, использующим D3 и Angular, и у меня возникла проблема с отображением значений области в шаблоне из события по нажатию.

Моя директива:

angular.module("maineMap")
    .directive("ngMap", ["appConfig", function(config){

        function countyClickHandler(d, i, scope){
            scope.currentCounty(d.properties.fips);
                console.log(scope.countySelection);
        }

        function initMap() {

            //.... other code

            g.append("g")
            .attr("class", "counties")
            .selectAll("path")
            .data(scope.mapData.features)
            .enter()
            .append("path")
            .attr("d", path)
            .attr("class", function(d){
                return d.properties.name;
            })
            .on("click", function(d, i){
                countyClickHandler(d, i, scope);
            });

        }

        return {
            restrict : "E",
            link : function(scope, el, attrs){
                initMap(scope, el);
            }
        };
    }]);

Мой контроллер:

angular.module("maineMap")
.controller('MapCtrl', ['$scope','MapService', function($scope, MapService){
    //execute data fetches via promises on template load
    $scope.mapData = MapService.getMapPaths().getData();
    $scope.cityData = MapService.getCityPositions().getData();
    $scope.countyData = MapService.getMapData().getData();

    $scope.countySelection = {};
    $scope.currentCounty = function(fips){
        $scope.countySelection = getCountyData($scope, fips);
        console.log($scope.countySelection);
    };

}]);

//helper function to extract data from external JSON file
function getCountyData($scope, fips){
    for(var i = 0; i < $scope.countyData.properties.length; i++) {
        if ($scope.countyData.properties[i].FIPS === fips){
            return $scope.countyData.properties[i];
        }
    }
}

Итак, текущее поведение имеет click Событие привязано к путям, нарисованным в директиве. Контроллер имеет функцию, связанную с областью действия, которая выполняет вспомогательную функцию для получения соответствующих данных.

console.log() операторы распечатываются, как и ожидалось, сначала отображается метод контроллера, а затем директива call. Так что я знаю, что эти значения видны в области видимости. Однако с этим шаблоном они вообще не отображаются:

<ng-map>
    <div id = "countyData">
        County: <span class = "countyDataPoint"> {{countySelection}}</span>
        2000 Population: <span class = "countyDataPoint"> {{countySelection.POP2000}}</span>
    </div>
</ng-map>

Единственный выход из countyData div - это пара пустых {} для элемента графства. countySelection.POP2000 пустой.

Учитывая этот макет, как я могу обновить шаблон со значениями области через click event`?

Answer 1

Решение было использовать $apply в обработчике кликов:

function countyClickHandler(d, i, scope){
        scope.$apply(function(){
            scope.currentCounty(d.properties.fips);
        });
}