Javascript Can'；t访问角度自定义指令链接函数中的attr数据

我试图访问由自定义指令链接函数中的控制器定义的attr数据

以下是一些简单的角度标记：

<div class='barChart'>
  {{vm.totals}}
  <bar-chart chart-data='vm.totals'></bar-chart
</div>

当我记录scope时，我可以按预期看到此对象中的数据数组，下面是一张图片：

如您所见，数据是底部的10项数组。阵列也会显示在浏览器中，因此数据就在那里。但是，只要我将

console.log

更改为记录该属性：

console.log(scope.data)

---

打印的值未定义。我试图访问link函数中的数据，以便使用d3创建可视化。数据就在那里，但只要我调用scope上的

.data

，它就没有定义。有什么想法吗？

您可以访问

vm.totals

作为范围变量，但作为属性传递：

scope: {
  chartData: '='  //@ reads the attribute value
}

在您的html中：

<bar-chart chart-data='vm.totals'></bar-chart>

请注意，这是单向绑定，因此如果需要双向绑定，则需要使用

=

更新：

如果使用异步调用，则需要使用双向绑定或监视链接函数中的更改：

scope.$watch('chartData', function(newVal) {
    if(newVal) {  console.log(scope.chartData) }
}, true);

---

请注意，由于它是一个数组，因此最好使用collection watch（作为最后一个参数为true）。

使用链接函数中的

@

将单向绑定到控制器

angular
.module（'应用程序'，[]）
.controller（'ctrl'，函数（$scope）{$scope.totals=“1234”；}）
.directive（'barChart'，[Callback]）
函数回调（）{
返回{
限制：'E'，
替换：false，
作用域：{data:'@'}，
链接：功能（范围、el、属性）{
console.log（attrs.chartData）；
}
}
}

{{totals}}

使用$watch记录数据：

angular
    .module('app')
    .directive('barChart', [Callback])

function Callback() {
    return {
      restrict: 'E',
      replace: false,
      scope: {data: '=chartData'},
      link: (scope, el, attrs) => {
        console.log(scope);
        console.log(el);
        console.log(attrs.chartData);
        //USE $watch
        scope.$watch("data", function(value) {
          console.log(value);
        });
      }
    }
}

---

或者不使用作用域并从html中的指令获取attr数据的想法？该指令将字符串literal

'vm.totals'

绑定到chartData，而不是来自控制器的数据。很抱歉，忘记在html@AndrewKim中插入插值，请检查更新。。这类作品。它使我看到一个数组数据字符串。但是我遇到了同样的问题，当我

console.log（scope）

时，我可以很好地看到它。只要我

console.log（scope.chartData）

它就会记录一个空字符串=（必须是数据还不在那里..或者我认为这与通过服务对csv文件进行异步调用以获取数据有关。

@

是属性绑定。单向绑定是

scope.$watch('chartData', function(newVal) {
    if(newVal) {  console.log(scope.chartData) }
}, true);

angular
    .module('app')
    .directive('barChart', [Callback])

function Callback() {
    return {
      restrict: 'E',
      replace: false,
      scope: {data: '=chartData'},
      link: (scope, el, attrs) => {
        console.log(scope);
        console.log(el);
        console.log(attrs.chartData);
        //USE $watch
        scope.$watch("data", function(value) {
          console.log(value);
        });
      }
    }
}