In my custom directive's link function, I have the following code that dynamically generates a map using d3...
map.append("g")
.selectAll("path")
.data(topojson.feature(counties, counties.objects.counties).features)
.enter()
.append("path")
.attr("d", geoPath)
.attr("class", function (d) {
return "county {{vm.showSalesAreas.data ? vm.getClass('" + d.properties.COUNTYFP + "') : ''}}";
})
.attr("ng-class", function (d) {
return "{'active': vm.toggleActiveCountyFP == " + d.properties.COUNTYFP + ", 'highlight': vm.fipsList.data.indexOf('" + d.properties.COUNTYFP + "') > -1 && vm.showSalesAreas.data == false}";
})
.attr("id", function (d) {
return d.properties.COUNTYFP;
})
.attr("tooltip-append-to-body", true)
.attr("uib-tooltip", function (d) {
return d.properties.NAME;
})
.call(function () {
$compile(this[0].parentNode)(scope);
});
Just to let you know, vm.salesAreas.data is actually a boolean value
I'm looking for a way to combine these two expressions into one in order to reduce the number of watchers. Any suggestions?
The issue I've encountered is that when I try to put the expression from the "class" .attr() into the ng-class attribute with 'classname' : boolean format, it doesn't seem to evaluate correctly because the classname comes from the vm.getClass() call. Any ideas on how to tackle this?
I attempted to use the line below, but even though vm.getClass() returns the correct class name and it is visible in the source inspection, the class fails to be applied...:
.attr("ng-class", function (d) {
return "{'active': vm.toggleActiveCountyFP == " + d.properties.COUNTYFP + ", 'highlight': vm.fipsList.data.indexOf('" + d.properties.COUNTYFP + "') > -1 && vm.showSalesAreas.data == false, '{{::vm.getClass('" + d.properties.COUNTYFP + "')}}': vm.showSalesAreas.data, 'county': true}";
})