angularJS ES6 指令

Question

我正在尝试在 angular es6 中开发应用程序。我有directve的问题。 这是我的代码

export default class RoleDirective {
  constructor() {
    this.template="";
    this.restrict = 'A';
    this.scope = {
        role :"@rolePermission"
    };

    this.controller = RoleDirectiveController;
    this.controllerAs = 'ctrl';
    this.bindToController = true;
  }

  // Directive compile function
  compile(element,attrs,ctrl) {
        console.log("df",this)
  }

  // Directive link function
  link(scope,element,attrs,ctrl) {

        console.log("dsf",ctrl.role)
  }
}

// Directive's controller
class RoleDirectiveController {
  constructor () {
    console.log(this.role)
    //console.log("role", commonService.userModule().getUserPermission("change_corsmodel"));
    //$($element[0]).css('visibility', 'hidden');
  }

}

export default angular
  .module('common.directive', [])
  .directive('rolePermission',[() => new RoleDirective()]);

问题是我无法在构造函数中获取角色值。 这是我的html实现

<a ui-sref="event" class="button text-uppercase button-md" role-permission="dfsd" detail="sdfdsfsfdssd">Create event</a>

如果我控制台它会得到控制器对象。但是使用this.role时不会得到任何结果。

Answer 1

好的，所以我设法找出了它是如何工作的。

基本上，范围值不能在控制器的构造函数上初始化（因为这是在新对象上执行的第一件事），并且还需要考虑绑定。

你可以在你的控制器中实现一个钩子，它可以帮助你处理你的用例：$onInit:

class RoleDirectiveController {
  constructor () { 
    // data not available yet on 'this' - they couldn't be
  }

  $onInit() {
    console.log(this.role)
  }
}

这应该可行。请注意，当不再依赖 $scope 来保存模型时，这是 angular1.5+ 的处理方式。因为如果你使用作用域，你可以把它放在控制器的构造函数中（注入）。