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

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

如果我将 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/

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 通过数据模型将方法传递给指令