我的所有角度控制器都成为同一个控制器的实例

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

accordion-controls组件如下所示：

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;
   }
}

但是，当我加载页面时，作为accordion-controls指令一部分的标记具有BuilderWysiwygController的控制器而不是BuilderAccordionController。

以下是Chrome开发工具的屏幕截图，其中显示了一个select元素，该元素属于accordion-controls指令，但具有“BuilderWysiwygController”控制器

显然我做错了什么，但我似乎无法看到它。为什么我的accordion-controls指令会附加错误的控制器？

Answer 1

指令错过scope属性，这意味着它们都是根据父作用域编译的。

控制器可能不同（它们是），但由于两个控制器的标识符相同，因此ctrl范围属性将被最后编译的指令（wysiwygDisplay）覆盖。 / p>