Все мои угловые контроллеры становятся экземпляром того же контроллера

Question

У меня есть эта разметка, которая вызывает две директивы:

<div class="row"> 
    <div class="col-sm-3"> 
     <accordion-controls></accordion-controls> 
    </div> 
    <div class="col-sm-9"> 
     <wysiwyg-display></wysiwyg-display> 
    </div> 
</div> 

модуль объявляется следующим образом:

var BuilderModule = angular 
    .module(ModuleName, []) 
    .controller('builderWysiwygController', BuilderWysiwygController) 
    .controller("builderAccordionController", BuilderAccordionController) 
    .directive("wysiwygDisplay",() => new WysiwygDisplayDirective()) 
    .directive("accordionControls",() => new AccordionControlsDirective()) 
    .service("builderService", BuilderService); 

компонент аккордеона управления выглядит это:

export class AccordionControlsDirective { 
    constructor() { 
     this.templateUrl = 'app/builder/builder-accordion.html'; 
     this.restrict = 'E'; 
     this.controller = "builderAccordionController"; 
     this.controllerAs = "ctrl"; 
    } 

    link(scope, ele, attrs) { 
     // 
    } 
} 

export class BuilderAccordionController { 
    constructor(builderService) { 
     this.builderService = builderService; 
     this.currentMenuModel = this.builderService.currentMenuModel; 
     this.templates = this.builderService.templates; 
     this.headlines = this.builderService.lists.Headlines; 
     this.accordionForm; 

     this.builderService.init().then(() => { 
     let buns = this.builderService.getDefaultBuns(); 
     this.templates = this.builderService.getTemplates(); 
     this.headlines = this.builderService.getHeadlines(); 
     }); 
    } 
} 

WYSIWYG директива выглядит следующим образом:

export class WysiwygDisplayDirective { 
    constructor() { 
     this.templateUrl = 'app/builder/builder-wysiwyg.html'; 
     this.restrict = 'E'; 
     this.controller = "builderWysiwygController"; 
     this.controllerAs = "ctrl"; 
    } 

    link(scope, ele, attrs) { 
     // 
    } 
} 

export class BuilderWysiwygController { 
    constructor(builderService) { 
     this.builderService = builderService; 
     this.currentMenuModel = this.builderService.currentMenuModel; 
    } 
} 

Однако, когда я загрузить страницу, разметку, которая является частью директивы гармошки-элементов управления имеет контроллер BuilderWysiwygController вместо BuilderAccordionController.

Вот скриншот из Дев инструментов Chrome показывая выберите элемент, который является частью директивы гармошка-управления, но имеющие контроллер «BuilderWysiwygController»

Очевидно, что я делаю что-то неправильно , но я, похоже, не вижу этого. Почему моя директива по регулированию аккордеона подключает к ней неправильный контроллер?

Answer 1

Директивы пропускают свойства scope, что означает, что оба они скомпилированы в отношении родительской области.

Контроллеры могут быть разными (и они есть), но поскольку идентификатор controllerAs одинаковый для обоих, свойство scope ctrl будет перезаписано последней скомпилированной директивой (которая равна wysiwygDisplay).