javascript - 如何将数据从指令传递到 Controller

Question

我在我的应用程序中构建了一个使用 D3.js 的自定义指令。当用户单击我的 D3 可视化中的节点时，我希望能够进行 API 调用以加载更多数据。这将需要获取与被单击的节点关联的数据并将其传递回我的 Controller 。然后 Controller 处理调用函数以检索更多数据。

开始时，我只是尝试记录与用户在我的 Controller 中单击的节点关联的数据。我的问题是此数据在我的 Controller 中是 undefined。

相关指令代码:

angular.module('gameApp')
  .directive('gmLinkAnalysis', gmLinkAnalysis);

gmLinkAnalysis.$inject = ['$location', 'd3'];

function gmLinkAnalysis($location, d3) {

  var directive = {
    restrict: 'E',
    templateUrl: '/app/gmDataVis/gmLinkAnalysis/gmLinkAnalysis.directive.html',
    scope: {
      data: '=',
      logNode: '&'
    },
    link: function(scope) {

      ...

      function click(d) {
        scope.logNode(d);
      }
    }
  };
  return directive;
}

HTML:

<gm-link-analysis data="connections.users" log-node="connections.logNode(d)"></gm-link-analysis>

相关 Controller 代码:

angular.module('gameApp')
  .controller('ConnectionsController', ConnectionsController);

function ConnectionsController() {
  var vm = this;

  ...

  vm.logNode = function(d) {
    console.log(d);
  };
}

如果我将 html 中的 d 替换为诸如“hello world”之类的字符串 (log-node="connections.logNode('hello world')")它已正确记录。很明显，我的问题在于没有正确地将我的数据作为我的 html 中的参数传递。我将如何着手这样做？

Answer 1

调用时需要指定参数:

所以在你的指令中它应该是

function click(d) {
  scope.logNode({d: d})
}

举个例子: http://jsfiddle.net/heavyhorse/7983y06k/