使用D3js时，与AngularJS的DOM数据绑定不起作用

Question

我正在使用D3js实现强制布局图。 我已经在其中实现了图形的地方实现了一个指令。

现在，我想在单击每个节点时从后端获取一些数据。 我正在尝试在AngularJS控制器中实现它。

ajax调用很好-它按预期返回数据。 问题在于数据更改未反映在DOM上。

HTML

<div nodes=some-nodes links=some-links force-diagram></div>

AngularJS指令

app
.directive('forceDiagram', [function () {
  return {
    replace: true,
    restrict: 'A',
    scope: {},
    controller: 'VisualizeCtrl',
    link: function postLink(scope, iElement, iAttrs) {
        var links = $.parseJSON(iAttrs.links);
        var nodes = $.parseJSON(iAttrs.nodes);
        ...
        ...
        var nodes = svg.selectAll("circle")
                    .data(nodes)
                    .enter()
                    .append("circle")
                    .attr("r", 10)
                    .attr("opacity", 0.5)
                    .on('click', function(d) {
                        // call to a function in the controller
                        return scope.pullData(d);
                    });
        ...
        ...
    };
  }
}])

AngularJS控制器

controller('VisualizeCtrl', ['$scope', '$http' function ($scope, $http) {
  $scope.payload = {id:0, text: ''};
  $scope.pullData = function (data) {
        url = 'index.php?r=' + data.node;
        $http({method: 'GET', url: url}).
        success(function(payload) {
            console.log(payload); // this is fine
            $scope.payload = payload;
            console.log($scope.payload) // this is also fine
        }).
        error(function() {
            console.log("error");
        });
    }
  }
}])

但是在以下HTML中，它没有显示

<div ng-controller="VisualizeCtrl">
  <div class="diagram" nodes=some-nodes links=some-links force-diagram></div>
  {{payload}} <!-- this is not showing any changes -->
</div>

任何帮助深表感谢。

Answer 1

您可以使用$ scope。$ apply（）来确保DOM已更新。 在此处查看更多信息： http : //www.sitepoint.com/understanding-angulars-apply-digest/

下面的代码应该工作。

success(function(payload) {
        console.log(payload); // this is fine
        $scope.$apply(function() {payload = payload;});
        console.log($scope.payload) // this is also fine
}).