Question

所以我在AngularJS中编写了一个自定义指令，在页面加载时生成HighCharts图。

我遇到的问题是它将后端的两个单独查询的数据应用于页面上的所有图形，而不仅仅是分配的图形。

我在设计中遗漏了一些明显的东西吗？

完整代码：https://github.com/matt-major/swordfish

问题的屏幕截图：http://postimg.org/image/lf7p69q4x/

Answer 1

我没有过多地研究你的代码，但看起来你正在将数据传递给'render'事件中的图形，这可能会发送到你的所有指令。我不会使用事件，而是通过属性将数据传递到您的指令中。 e.g。

JS

app.directive('chart', function () {
    return {
        scope: {
            series: '='
        },
        link: function (scope, element) {
            scope.$watch('series', function (newValue) {
                //Render the graph here
            }
        }
    }
}

HTML

<div chart series="ctrl.someData"></div>

此处还有我在https://github.com/robianmcd/angular-stocks/blob/master/client/components/stockChartDirective.js

示例应用中的工作示例

您可以看到正在http://angular-stocks.herokuapp.com/#/details?symbol=GOOG

运行的应用

Answer 2

经过一番试验和错误后，我设法解决了这个问题。

看来我把不正确的范围拉入我的控制器，这阻止我只在这个范围内发射/播放。

由于更改范围（这是唯一的更改），使用此指令将数据正确绑定到每个元素，并且图形正确显示。

对于那些感兴趣的人我最初使用

$scope.getData($scope.$parent.alert);

将此更改为以下后，问题就解决了。

$scope.getData($scope.$parent);

AngularJS指令应用错误的数据

2 个答案: