从指令范围对受控类的“this”进行角度访问答案

【问题标题】：Angular access to "this" of controlled class from directive scope从指令范围对受控类的“this”进行角度访问
【发布时间】：2017-03-06 12:32:51
【问题描述】：

我用这样的 es6 风格实现了 Angular 项目：

controller.js

export default class InsertController {

    constructor($scope) {
        this.$scope =$scope;
        this.data=[];
    }

    fillGrid(data) {

        console.log(data);

    }


}
InsertController.$inject = ['$scope'];

Directive.js

import angular from 'angular';

function FanGrid($compile) {
    return {

        replace: true,
        restrict: 'E',
        transclude: true,
        link: function (scope, element, attrs) {

            //I want access to fillGrid method of controller
            scope.fillGrid(data);


        }

    }
}

export default angular.module('directives.fanGrid', [])
    .directive('fanGrid', FanGrid)
    .name;

现在我想知道

如何在指令中访问和调用控制器的fillGrid()方法
如何从指令访问控制器类的"this"

【问题讨论】：

标签： javascript angularjs angularjs-directive ecmascript-6

【解决方案1】：

如果你在angular1中使用ES6，最好实现这样的指令：

class FanGridController {
    constructor() {
        this.fillGrid('some data') //Output some data
    }
}

function FanGridDirective($compile) {
    return {
        replace: true,
        restrict: 'E',
        transclude: true,
        controller: "FanGridController",
        scope: {
            fillGrid: "=?fillGrid",
            controllerThis: "=?controllerThis"
        }
        link: function(scope, element, attrs) {
            //I want access to fillGrid method of controller
        },
        controllerAs: "vm",
        bindToController: true
    }
}

export { FanGridController, FanGridDirective }

通过此实现，this 指向FanGridController 中的“vm”。 vm 是 $scope 对象的属性。并且scope:{}中的所有变量都可以被this访问

您的问题的答案是，您可以将 fillGrid 和 controllerThis 作为范围参数并将其传递到 HTML 模板中。然后用this.fillGrid 调用这个方法。

export default class InsertController {
    constructor($scope) {
        this.$scope = $scope;
        this.data = [];
    }

    fillGrid(data) {
        console.log(data);
    }
}
InsertController.$inject = ['$scope'];

在 HTML 中传递参数

<fan-grid fill-grid="vm.fillGrid" controller-this="vm"></fan-grid>

然后调用方法并在指令控制器中访问控制器的this：

class FanGridController {
    constructor() {
        let controllerThis = this.controllerThis; 
        this.fillGrid('some data'); //Output some data
    }
}

或在链接函数中：

link: function(scope, element, attrs) {
    let controllerThis = $scope.vm.controllerThis;
    $scope.vm.fillGrid('some data') //Output some data
}

【讨论】：

【解决方案2】：

您可以使控制器属于指令本身，因此它们具有共享范围。

import angular from 'angular';
import directiveController from 'directive.controller.js';

export default () => ({
  bindToController: {
    someBinding: '='
  },
  replace: true,
  restrict: 'E',
  link: function (scope, element, attrs) {

    // To access a method on the controller, it's as simple as you wrote:
    scope.vm.fillGrid(data);

  },
  scope: true,
  controller: directiveController,
  controllerAs: 'vm'
});

那么你的控制器就是你写的：

export default class directiveController {

  constructor($scope) {
    this.$scope = $scope;
    this.data = [];
  }

  fillGrid(data) {
    console.log(data);
  }
}

【讨论】：