传递给 Angularjs 指令的对象未定义答案

【问题标题】：Object passed to Angularjs directive is undefined传递给 Angularjs 指令的对象未定义
【发布时间】：2016-04-06 00:55:41
【问题描述】：

我一直在关注文档并阅读有关 SO 的其他问题，但我完全感到困惑。我有一个 AngularJS 1.3.14 应用程序。我正在使用 ng-route 和 controller-as 语法来访问我的页面。我有一个运行良好的大页面。但是，我正在尝试创建一个指令，但无法让 JS 对象正确传递给指令。

这是 HTML：

<timechart itemsToPlot="memberData.data.adcs" title="Tares" xprop="time" yprop="tare"></timechart>

变量memberData 是我的controller-as 名称。嵌套对象memberData.data.adcs 用于在该行上方构建一个表格，如果我将{{ memberData.data.adcs }} 插入HTML 页面，它会打印出JS 对象，所以我知道那里有数据。

这是指令：

 myModule.directive('timechart', function() {
    var linker = function(scope, element, attrs) {
        var xprop = attrs['xprop'];
        var yprop = attrs['yprop'];
        var title = attrs['title'];
        console.log(typeof itemsToPlot);
        console.log(typeof scope.itemsToPlot);
        // blah blah blah elided
    };
    return {
        restrict: 'EA',
        scope: { 
            itemsToPlot: '=',
            title: '@',
            xprop: '@',
            yprop: '@'
        },
        link: linker
    };
});

当我在 console.log() 语句之后设置断点时，我看到 xplot、yplot 和 title 都可用，可以通过 attrs 数组（如代码所示）或在范围对象中使用。但是，itemsToPlot 变量始终未定义。在作用域对象中定义了一个itemsToPlot 变量，但它始终未定义。

我已经尝试了十五种方法来形成范围、命名属性、尝试填充变量。我已经查看了关于 SO 的所有问题，看来我做得正确。我希望这里有人能看到我的错误！

【问题讨论】：

标签： angularjs angularjs-directive angularjs-scope

【解决方案1】：

很可能确实设置了变量，但不是立即设置。所以你需要做的是在你的指令作用域上添加一个监视。

myModule.directive('timechart', function() {
    var linker = function(scope, element, attrs) {
        var xprop = scope.xprop;
        var yprop = scope.yprop;
        var title = scope.title
        var itemsToPlot = scope.itemsToPlot

        scope.$watch('itemsToPlot', function(newVal){
            itemsToPlot = newVal;
            // Just as a proof of concept:
            if( typeof itemsToPlot !== 'undefined' ) console.log(itemsToPlot);
        });
    };
    return {
        restrict: 'EA',
        scope: { 
            itemsToPlot: '=',
            title: '@',
            xprop: '@',
            yprop: '@'
        },
        link: linker
    };
});

【讨论】：

谢谢，就是这样！上面的代码仍然没有工作，尽管其他人有类似的问题here 和here。我必须上一层并传入memberData.data 而不是memberData.data.adcs。但终于成功了！
太棒了！在不知道数据结构的情况下，很难确定是否传递父对象，但很高兴这让您找到了解决方案

【解决方案2】：

将您的 html itemsToPlot 更改为 items-to-plot

<timechart items-to-plot="memberData.data.adcs" title="Tares" xprop="time" yprop="tare"></timechart>

【讨论】：