Angular + D3 - 从单击事件获取范围值以显示在模板中 [英] Angular + D3 - Get scope values to show in template from click event

问题描述

我正在使用 D3 和 Angular 开发地图应用程序，但在显示来自点击事件的模板中的范围值时遇到问题.

我的指令:

angular.module("maineMap").directive("ngMap", ["appConfig", function(config){函数countryClickHandler(d, i, scope){scope.currentCounty(d.properties.fips);控制台日志(范围.县选择)；}函数 initMap() {//.... 其他代码g.append("g").attr(班级"，县").selectAll("路径").data(scope.mapData.features).进入().append("路径").attr("d", 路径).attr(类"，函数(d){返回 d.properties.name;}).on("点击", function(d, i){CountyClickHandler(d, i, scope);});}返回 {限制:E"，链接:功能(范围，EL，属性){initMap(范围，el)；}};}]);

我的控制器:

angular.module("maineMap").controller('MapCtrl', ['$scope','MapService', function($scope, MapService){//通过模板加载时的承诺执行数据获取$scope.mapData = MapService.getMapPaths().getData();$scope.cityData = MapService.getCityPositions().getData();$scope.countyData = MapService.getMapData().getData();$scope.countySelection = {};$scope.currentCounty = 函数(fips){$scope.countySelection = getCountyData($scope, fips);控制台日志($scope.countySelection)；};}]);//从外部JSON文件中提取数据的辅助函数函数 getCountyData($scope, fips){for(var i = 0; i < $scope.countyData.properties.length; i++) {if ($scope.countyData.properties[i].FIPS === fips){返回 $scope.countyData.properties[i];}}}

因此，当前行为有一个 click 事件绑定到指令中绘制的路径.控制器有一个与作用域绑定的函数，该函数执行辅助函数以获取相关数据.

console.log() 语句按预期打印出来，首先显示控制器方法，然后显示指令调用.所以我知道这些值在范围内是可见的.但是，使用此模板，它们根本不显示:

<div id = "countyData">县:<span class = "countyDataPoint">{{countySelection}}</span>2000 人口:<span class = "countyDataPoint">{{countySelection.POP2000}}</span>

</ng-map>

countyData div 的唯一输出是 County 元素的一对空 {}.countySelection.POP2000 为空.

鉴于此布局，我如何通过 click 事件`使用范围值更新模板?

解决方案

解决方案是在点击处理程序中使用 $apply:

function CountyClickHandler(d, i, scope){范围.$应用(函数(){scope.currentCounty(d.properties.fips);});}

I'm working on a map application using D3 and Angular, and I'm having an issue showing scope values in a template from an on-click event.

My directive:

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);
            }
        };
    }]);

My controller:

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];
        }
    }
}

So, current behavior has an click event bound to the paths drawn within the directive. The controller has a function bound to the scope which executes the helper function to get the relevant data.

The console.log() statements print out as expected, with the controller method showing first, then the directive call second. So I know these values are visible on the scope. However, with this template, they are not showing at all:

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

The only output from the countyData div is a pair of empty {} for the County element. countySelection.POP2000 is empty.

Given this layout, how can I have the template update with the scope values via a click event`?

解决方案

Solution was to use an $apply within the click handler:

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

这篇关于Angular + D3 - 从单击事件获取范围值以显示在模板中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！