angularJS ES6指令 [英] angularJS ES6 Directive

问题描述

我正在尝试在角度es6中开发应用程序。我有一个问题的指导。
这是我的代码

 导出默认类RoleDirective {
 constructor（）{
 this .template = ; 
 this.restrict ='A'; 
 this.scope = {
 role：@ rolePermission
}; 
 
 this.controller = RoleDirectiveController; 
 this.controllerAs ='ctrl'; 
 this.bindToController = true; 
} 
 
 //指令编译函数
 compile（element，attrs，ctrl）{
 console.log（df，this）
} 
 
 //指令链接函数$ ​​b $ b link（scope，element，attrs，ctrl）{
 
 console.log（dsf，ctrl.role）
} 
} 
 
 //指令的控制器
 class RoleDirectiveController {
 constructor（）{
 console.log（this.role）
 //console.log(\"role，commonService.userModule（）。getUserPermission（change_corsmodel））; 
 //$($element[0]).css('visibility'，'hidden'）; 
} 
 
} 
 
导出默认角度
 .module（'common.directive'，[]）
 .directive（'rolePermission '，[（）=> new RoleDirective（）]）; 
  

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

 < a ui-sref =eventclass =button text- button-mdrole-permission =dfsddetail =sdfdsfsfdssd>创建事件< / a> 
  

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

解决方案

好的，所以我设法了解这是如何工作的。

基本上，范围值不能在控制器的构造函数上进行初始化（因为这是在新对象上执行的第一件事），还有一些要考虑的约束。 / p>

您可以在控制器中实现一个可以帮助您使用用例的钩子： $ onInit ：

  class RoleDirectiveController {
 constructor（）{
 //not他们不能
} 
 
 $ onInit（）{
 console.log（this.role）
} 
} 
  

这应该工作。请注意，在不依赖于$范围的情况下，这是一种角色1.5 +的方式。因为如果你使用范围，你可以在控制器的构造函数（注入）中。

I am trying to develop an application in angular es6 . I have a problem with directve. Here is my code

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

The problem is i couldn't get the role value inside constructor. here is my html implementation

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

If i console this it will get the controller object. But it will not get any result while use this.role.

解决方案

Ok, so I managed to find out how this works.

Basically, the scope values cannot be initialized on the controller's constructor (because this is the first thing executed on a new object) and there is also binding to be considered.

There is a hook that you can implement in your controller that can help you with your use case: $onInit:

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

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

This should work. Note that this is angular1.5+ way of doing things when not relying on $scope to hold the model anymore. Because if you use the scope, you could have it in the controller's constructor (injected).

这篇关于angularJS ES6指令的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！