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

Two way data binding in C3.js in AngularJS

本文关键字：数据绑定 AngularJS js C3      更新时间：2023-09-26

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

在控制器中，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}];
      }
    };
  });

所以它绑定在指令隔离作用域中。

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

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

这里有几个问题：

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

更新的普伦克

相关文章：