无法在角度自定义指令链接函数中访问 attr 数据

Question

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

这是一些简单的角度标记：

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

这是指令定义：

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);
      }
    }
}

当我记录范围时，我可以按预期看到该对象中的数据数组，这是一张图片：

如您所见，数据是底部的 10 项数组。该数组也显示在浏览器中，因此数据就在那里。但是，只要我更改 console.log 以记录该属性：

console.log(scope.data)

打印出来的值是未定义的。我正在尝试访问链接函数中的数据，以便可以使用 d3 创建可视化。数据在那里，但只要我在范围内调用.data，它就没有定义。有什么想法吗？

Answer 1

使用 $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);
        });
      }
    }
}

Answer 2

在链接函数中使用@ 可以通过一种方式绑定到控制器。

angular
    .module('app', [])
.controller('ctrl', function($scope){$scope.totals="1234";})
    .directive('barChart', [Callback])

function Callback() {
    return {
      restrict: 'E',
      replace: false,
      scope: {data: '@'},
      link: function(scope, el, attrs) {
        console.log(attrs.chartData);
      }
    }
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="ctrl">
<div class='barChart'>
  {{totals}}
  <bar-chart chart-data='{{totals}}'></bar-chart>
</div>
  </div>

Answer 3

您可以将vm.totals 作为范围变量访问，但作为属性传递：

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

在你的 html 中：

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

现在在链接功能中您可以访问它：

console.log(scope.chartData);

请注意，这是一种方式绑定，因此如果您需要两种方式，则需要改用=。

更新：

如果您使用异步调用，则需要使用两种方式绑定或注意链接功能的变化：

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

请注意，由于它是一个数组，因此最好使用集合监视（true 作为最后一个 arg）。