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

问题描述

我正在使用D3和Angular在地图应用程序上工作，我遇到一个问题，显示范围值从模板中的点击事件。

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：

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

我的控制器：

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.

console.log（）语句打印输出的预期，控制器方法显示第一，然后指令调用第二。所以我知道这些值是可见的范围。但是，使用此模板，它们根本不显示：

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>

countyData div的唯一输出一个空的 {} 为郡元素。 countySelection.POP2000 为空。

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`?

推荐答案

c $ c> $ apply 在点击处理程序中：

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屋！