javascript - AngularJS 中 C3.js 中的两种方式数据绑定(bind)

Question

我正在尝试通过单击条形图来过滤表中的数据(当我单击条形图时，表中会出现相应的记录)

在 Controller 中，有 onlick 方法用于从对象中获取名称。

onclick: function(d, i) {
  $scope.country = d.name;
  console.log($scope.country);
}

还有一个具有隔离范围的表指令，它期望传递一个国家/地区

.directive("countryItem", function() {
    return {
      restrict: "E",
      templateUrl: "table.html",
      //isolated scope and 2-way bind country
      scope: {
        country: "="
      },
      link: function(scope, element, attrs) {
        scope.countries = [{"country":"Argentina","fifarank":7},{"country":"Belgium","fifarank":12}, {"country":"Croatia","fifarank":14}];
      }
    };
  });

因此它绑定(bind)在指令隔离范围中。

<tr ng-repeat="foot in countries | orderBy:orderByField:reverse | filter:search" country="country">

我做错了什么？这是plunker ，但 onclick 方法仅适用于 Firefox 以及旧版本的 Chrome 和 Opera。

Answer 1

这里有几个问题:

1) 在您的 Plunker 中，您没有向指令传递 country 值 - 应该如下所示:

<country-item country="country"></country-item>

2) filter 上的语法错误 - 应该是这样的:

<tr ng-repeat="foot in countries | orderBy:orderByField:reverse | filter:country">

3) 当您从 D3 或其他非 Angular 事件处理程序调用 Angular 代码时，您需要将其包装在 $timeout 中，以触发 Angular $digest 循环。

onclick: function(d, i) {
  $timeout(function(){
    $scope.country = d.name;
    console.log($scope.country);
 });
}

Updated Plunker