Question

所以，这是我的控制器，具有一些小功能：

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

这不起作用，我尝试了几种方法但是......如何从指令到控制器功能访问控制器？求助。

Answer 1

我认为你并没有完全理解Angular＆＃39; .directive()正在做什么。它不是为指令实例注册类，而是注册directive factory class。

我想您的问题TreeNodeTooltip是您注册为指令工厂的内容。在这种情况下， $ injector 可以在构造函数中注入服务，但不能注入任何实际的 $ scope （不确定如何从中获取错误）。

通过 postLink / 链接功能初始化实际指令 instance 。那里你也有指令范围。但是，您正在从指令定义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>

如何从AngularJS中的指令访问控制器函数

1 个答案: