AngularJS指令应用错误的数据

AngularJS Directive Applying Wrong Data

本文关键字：数据 错误 应用 指令 AngularJS      更新时间：2023-09-26

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

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

我的设计是否遗漏了一些明显的东西?

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

问题截图:http://postimg.org/image/lf7p69q4x/

我没有看你的代码太多，但它看起来像你正在传递数据的图形在一个'渲染'事件，这可能会发送到所有你的指令。而不是使用事件，我会通过属性传递数据到你的指令。例如

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

经过一番尝试和错误，我终于解决了这个问题。

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

由于改变了作用域(这是唯一做的改变)，数据被正确地绑定到使用这个指令的每个元素，并且图形被正确地显示。

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

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

将其更改为以下内容后，问题就解决了。

$scope.getData($scope.$parent);
相关文章：