Как передать данные из директивы контроллеру

Question

Я создал пользовательскую директиву в своем приложении, которое использует D3.js. Я хочу, чтобы иметь возможность вызвать вызов API для загрузки большего количества данных, когда пользователь нажимает на узел в моей визуализации D3. Это потребует захвата данных, связанных с узлом, который был нажат, и передачи его обратно на мой контроллер. Затем контроллер обрабатывает вызов функции для получения большего количества данных.

Чтобы начать работу, я просто пытаюсь зарегистрировать данные, связанные с узлом, на который пользователь щелкнул мой контроллер. Моя проблема в том, что эти данные в моем контроллере 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); 
    }; 
} 

Если я заменю 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 пропускания метод директивы по модели данных