I have developed a custom directive with an isolated scope and element. I am utilizing the values passed into the directive to construct d3/dc charts. The data goes through crossfilter on the $scope so that the directive attributes can access it. Despite successfully logging the scope within the directive, I am unable to directly access the nested object without encountering 'undefined' errors.
In the controller:
var data = [{
"player": "Player A",
"team": "New York",
"hits": 200
}, {
"player": "Player B",
"team": "New York",
"hits": 225
}, {
"player": "Player C",
"team": "New York",
"hits": 1
}, {
"player": "Player D",
"team": "San Francisco",
"hits": 268
}, {
"player": "Player E",
"team": "San Francisco",
"hits": 22
}, {
"player": "Player F",
"team": "Seattle",
"hits": 2
}, {
"player": "Player G",
"team": "Seattle",
"hits": 25
}]
$scope.ndx = crossfilter(data);
$scope.playerDim = $scope.ndx.dimension(function (d) {
return d.player;
});
$scope.playerGrp = $scope.playerDim.group().reduceSum(function (d) {
return d.hits;
});
HTML:
<my-chart id="someChart"
chart-type="pieChart"
height="200"
width="200"
dimension="playerDim"
group="playerGrp" />
Directive:
myApp.directive('myChart', ['chartFactory', function(chartFactory) {
return {
restrict: 'E',
scope: {
chartType: "@",
height: "@",
width: "@",
dimension: "=",
group: "="
},
link: function(scope, elem, attr) {
console.log(scope) // correctly displays the dimension object as a property of the object
console.log(scope.dimension) // returns undefined
}
};
}])
It seems like the function hasn't fully set the object when I try to log it, even though it appears there initially. I've attempted using $watch, $timeout, and other methods but have had no luck accessing the nested object.
Could someone please assist me in understanding this issue?