angularJS ES6指令

我正在尝试在角es6中开发应用程序。我有一个directve问题。这里是我的代码angularJS ES6指令

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时它不会得到任何结果。

来源

2017-01-10 user3118041

你也可以参考[这个答案]（http://stackoverflow.com/a/41524591/2435473）。 –

使用ES5你会遇到完全相同的问题。对于这个指令来说，首先要有一个控制器和一个独立的范围是没有意义的。 – zeroflagL

好的，所以我设法弄清楚它是如何工作的。

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

还有就是你可以在你的控制器实现，可以帮助你与你的使用情况挂钩：$onInit：

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

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

这应该工作。请注意，这是angular1.5 +不依赖$ scope来保存模型的方式。因为如果你使用范围，你可以在控制器的构造函数中注入（注入）。

来源

2017-01-10 08:11:34

谢谢你救了我的一天..其实我正在使用bindtocontroller，所以它有它自己的范围吗？不是全球范围。 – user3118041

您正在使用独立作用域（通过在您的指令'范围'定义中使用对象来定义）。 'bindToController'是别的东西 - 这基本上告诉角使用控制器对象，而不是$ scope对象 - 但它会被隔离的任何一种方式 –

angularJS ES6指令

回答

相关问题