无法在角度自定义指令链接功能中访问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

您可以访问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);

请注意，因为它是一个数组，所以最好使用collection watch（true作为最后一个arg）。

Answer 3

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

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>