Javascript 在svg元素上使用带d3.js的Angular ng类

试图在元素上使用库，但运气不佳

HTML

JS

这是最新的。 有两个css类，active和inactive，我想根据$scope.status变量的值动态分配给svg rect。实际上它不起作用。我尝试了ng类表达式的一些变体，如：

"{status ? 'active' : 'inactive'}" 

或

但都不管用

---

svg元素上不支持ng class指令，还是我做错了什么？

您试图将ng class用作属性，而不首先通过angular编译它

Angular不会自动侦听此属性。您必须在生成的svg上调用

$compile（svg）（$scope）

，这样angular就能发挥其“魔力”

还要确保在dom元素而不是包装的d3元素上调用angular

*, *:before, *:after {
  bounding-box: border-box;
}

#svgContainer {
  width: 400px;
  height: 400px;
  background-color: #333;
}

.btn {
  margin: 1em;
  padding: 1em;
}

.active {
  fill: red;
}

.inactive {
  fill: #666;
}

var app = angular.module("myApp", []);

app.controller("MainCtrl", ["$scope", function($scope) {

    $scope.status = true;
  $scope.switchStatus = function() {
    $scope.status = !$scope.status;
  }

  var svg = d3.select("#svgContainer").append("svg")
    .attr("width", 400)
    .attr("height", 400);

  var rect = svg.append("rect")
    .attr("x", 150)
    .attr("y", 150)
    .attr("width", 100)
    .attr("height", 100)
    .attr("ng-class", "status ? 'active' : 'inactive'");

}]);

"{status ? 'active' : 'inactive'}" 

"{'status' ? 'active' : 'inactive'}"