Question

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

要开始，我只是尝试记录与用户在我的控制器中单击的节点相关联的数据。我的问题是我的控制器中的数据是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>

相关控制器代码：

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

function ConnectionsController() {
  var vm = this;

  ...

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

如果我使用诸如“hello world”（d）之类的字符串替换html中的log-node="connections.logNode('hello world')"，则会正确记录。很明显，我的问题在于没有正确地将我的数据作为我的html中的参数传递。我该怎么做？

Answer 1

您需要在通话中指定参数：

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

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

这是一个例子： http://jsfiddle.net/heavyhorse/7983y06k/

Answer 2

您可以将一些方法附加到指令中，但我个人更喜欢使用 $.broadcast 服务来保持代码库的清洁。

指令

function click(d) {
   $rootScope.$broadcast('someEvent', d);
 }

控制器

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

 function ConnectionsController() {
   var vm = this;

   vm.$on('someEvent', function(event, data) {
     console.log(data)
   });
 }

如果您仍然认为传递方法可以解决这个问题，那么这里有一个simple example通过数据模型将方法传递给指令

如何将数据从指令传递给控制器

2 个答案: