事件后角度重新加载 D3 图表指令答案

【问题标题】：Angular Reload D3 Chart Directive after event事件后角度重新加载 D3 图表指令
【发布时间】：2015-08-27 10:45:03
【问题描述】：

我正在尝试获取一个 angular 指令元素，它创建一个 d3 图表（类似于此处看到的 http://phloxblog.in/angulard3/start.html#.Vd5w_bM2w_t）以在事件发生后更改其数据源。

目前我的指令在静态数据源上正常工作，但我需要能够对导致从 API 获取数据并重新加载图表的用户定义事件做出反应。实际上我想要这样的东西：

<myDirective dataSource={{some $scope variable here}} otherStuff=... />

但这似乎不起作用，因为 $scope 变量没有得到评估。

我认为另一种可行的方法是让指令执行以下操作：

<myDirective ng-model="some $scope variable here" />

以便该指令可以访问 1 个 $scope 级别变量，该变量是我的配置的 json 对象。

抱歉，这是一个基本问题。我已经尝试弄清楚如何做到这一点，但我不完全确定我需要用 Angular 术语搜索什么。

谢谢！

【问题讨论】：

标签： angularjs d3.js

【解决方案1】：

当有一些用户定义的事件时，您可以观察变量的变化。

$scope.$watch (function ($scope) {
   // Lets $scope.variable be the variable which gets changed 
   // when there is a user event
    return $scope.variable
}, function () {
     //perform your data fetch from API here
     // load it into the data source
});

上面的代码必须在你的控制器中。

here 提供了关于 $scope.watch() 的一个很好的教程。

【讨论】：