C3.js AngularJS 中的双向数据绑定

Question

我试图通过点击条形图来过滤 table 中的数据（当我点击条形图时，在 table 中出现相应的记录）

在控制器中有 onlick 从对象中获取名称的方法。

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

还有一个具有独立作用域的 table 指令，它期望通过一个国家/地区

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

所以它绑定在指令隔离范围内。

<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 $摘要循环。

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

Updated Plunker

C3.js AngularJS 中的双向数据绑定

Two way data binding in C3.js in AngularJS

javascript

2-way-object-databinding

d3.js

angularjs

c3.js