angularjs - 如何在嵌套元素指令之间进行通信？

Question

我想制作两个元素指令，barchart并按bar如下方式使用：

<barchart>
  <bar ng-repeat='row in some_table'
       label='row.date | date'
       height='row.profit' />
</barchart>

我已经有一些 javascript 可以在给定(label, height)对的画布元素上绘制适当的图形。barchart让指令从指令的属性中读取值的正确方法是什么bar？

Answer 1

假设您的示例是您的问题的简化，以下是您如何在这两个指令之间进行通信：

app.directive('barchart', function($log) {
  return {
    restrict: 'EA',
    controller: function($scope) {
      this.drawBar = function(height, date) {
        $log.log('[barchart] Handling charting of bar with label ' + date + ' and height ' + height + '.');
      };
    },
    link: function(scope, element, attrs) {
      $log.log('[barchart] Doing DOM transformations...')
    }
  };
});

app.directive('bar', function($log) {
  return {
    restrict: 'EA',
    require: '^barchart', // Require an immediate parent element of barchart
    // Requiring the barchart directive gives us access to the bar chart controller instance.
    link: function(scope, element, attrs, barchartCntrl) {
      barchartCntrl.drawBar(scope.row.height, scope.row.date);
    }
  };
});

工作的笨蛋