angularJS ES6 Direktive

Question

Ich versuche eine Anwendung in Winkel ES6 zu entwickeln. Ich habe ein Problem mit directve. Hier ist mein 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()]); 

Das Problem ist, ich nicht die Rolle Wert innerhalb Konstruktor bekommen konnte. hier ist meine HTML-Implementierung

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

Wenn ich diese Konsole wird das Controller-Objekt erhalten. Aber es wird kein Ergebnis erhalten, wenn Sie this.role verwenden.

Answer 1

Ok, also habe ich herausgefunden, wie das funktioniert.

Grundsätzlich können die Scope-Werte nicht im Konstruktor des Controllers initialisiert werden (weil dies das erste Element ist, das auf einem neuen Objekt ausgeführt wird) und es gibt auch eine Bindung, die berücksichtigt werden muss.

Es gibt einen Haken, die Sie in Ihrem Controller implementieren können, dass Sie mit Ihren Anwendungsfall helfen können: $onInit:

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

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

Diese funktionieren sollte. Beachten Sie, dass dies angle1.5 + Vorgehensweise ist, wenn Sie nicht mehr auf $ scope angewiesen sind, um das Modell zu halten. Wenn Sie den Bereich verwenden, könnten Sie ihn im Konstruktor des Controllers (injected) haben.