объединение выражения class={{}} с выражением ng-class={'className': boolean}?

У меня есть следующий код внутри функции ссылки пользовательской директивы, которая создает динамическую карту с использованием 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);
});

К вашему сведению, vm.salesAreas.data является логическим значением

Как я могу объединить эти два выражения в одно, чтобы уменьшить количество наблюдателей?

Проблема, с которой я боролся, заключается в том, что выражение в «классе». из вызова vm.getClass(). Идеи?

Я попытался использовать строку ниже, но, несмотря на то, что vm.getClass() возвращает правильное имя класса и отображается в проверке исходного кода, он не может применить класс...:

.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}";
})

javascript angularjs d3.js ng-class
person mkelley82    schedule 18.12.2015    source источник
comment
просто чтобы подтвердить, что d.properties.COUNTYFP меняется, и в зависимости от этого связанный с путем класс должен продолжать меняться. Это требование   -  person Cyril Cherian    schedule 18.12.2015
comment
Да, d.properties.COUNTYFP меняется с каждым путем, и его значение используется для определения соответствующего класса для назначения.   -  person mkelley82    schedule 18.12.2015

Ответы (1)


arrow_upward
0
arrow_downward

Строка ниже предполагает, что весь путь будет иметь class count.

enter()
.append("path")
.attr("d", geoPath)
.attr("class", function (d) { 
    return "county {{vm.showSalesAreas.data ? vm.getClass('" + d.properties.COUNTYFP + "') : ''}}"; 
})

Так что это может быть сделано в этом

enter()
.append("path")
.attr("d", geoPath)
.classed("county", true)//so now all path will have class county 
...

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

$scope.$watch(DATA_WHICH_CHANGE,
              function() {
                  d3.selectAll(".county").classed("SOME_CLASS", YOUR_FUNCTION(d))
              }
             );

function YOUR_FUNCTION(d){
      //this function will return true or false depending on the value of d(which is that data)
}

У меня есть что-то подобное в моем уме, чтобы преодолеть ваш набор проблем.

Надеюсь это поможет!

person Cyril Cherian    schedule 20.12.2015