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

AngularJS data-binding with DOM not working while using D3js

本文关键字：AngularJS 数据绑定 不起作用 DOM 带有 D3js 使用      更新时间：2023-09-26

我正在使用D3js实现力布局图。我已经实现了一个指令，我已经实现了图形。

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

ajax 调用很好 - 它按预期返回数据。问题是数据变化没有反映在DOM上。

该目录

<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>

任何帮助都非常感谢。

您可以使用 $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
}).
相关文章：