Как получить доступ к функции контроллера из директив в AngularJS

Итак, это мой контроллер с какой-то крошечной функцией:

class DashboardCtrl {
  constructor ($scope, $stateParams) {
    "ngInject";

    this.$scope = $scope;
    this.title = 'Dashboard';
  }
  loadCharts () {
    // some logic here
  }
 }

export default DashboardCtrl;

А теперь моя директива:

class TreeNodeTooltip {
  constructor ($scope, $state) {
    "ngInject";

    this.$scope = $scope;
    this.$state = $state;
    this.scope = {
        loadCharts: '&'
    };
  }
  link (scope, elem, attrs) {
    $(elem).on('click', '.node-name', (e) => {
       console.log(this.$scope.loadCharts());
       console.log(this.scope.loadCharts());
       console.log(this.$scope.main.loadCharts());
    }
  }
}

Это не работает, я пробовал несколько способов, но … Как получить доступ к контроллеру из директив, к функции контроллера? Thx для помощи.

1 ответ

  1. Я думаю, что вы не полностью понимаете, что .directive()делает Angular. Он не регистрирует класс для экземпляров директив, но регистрирует класс фабрики директив .

    Я предполагаю, что TreeNodeTooltipиз вашего вопроса является то, что вы регистрируете как директивная фабрика. В этом случае $injector может вводить службы в конструктор, но не любой фактический $scope (не уверен, как это возможно, что вы не получаете ошибку от этого).

    Фактический экземпляр директивы инициализируется с помощью функции postLink / link. Там у вас также есть область действия директивы. Однако вы получаете доступ к области из определения директивыthis.scope, и это не имеет смысла.

    Следующая модификация обеспечивает битовый смысл предоставляемого кода:

    class TreeNodeTooltip {
      constructor () {
        this.scope = {
            loadCharts: '&'
        };
      }
      link (scope, elem, attrs) {
        $(elem).on('click', '.node-name', (e) => {
           console.log(scope.loadCharts());
        }
      }
    }
    

    А потом в шаблоне:

    <!-- ngController only required if it is not registered as state controller -->
    <div ng-controller="DashboardCtrl as dashboardCtrl">
        <tree-node-tooltip load-charts="dashboardCtrl.loadCharts()" />
    </div>