带有动态控制器的 Angular 指令答案

【问题标题】：Angular directive with dynamic controller带有动态控制器的 Angular 指令
【发布时间】：2015-10-29 12:47:53
【问题描述】：

我想创建一个带有动态控制器和模板的面板指令，以便我可以在我的应用程序中显示上下文相关选项。例如，单击“字体”设置上的编辑将显示“字体选项”。

我找不到太多关于它的文档，但看起来现在可以使用 name 属性在指令上指定控制器名称：

app.directive('dynamicPanel', function() {
  return {
    restrict: 'A',
    scope: {
      config: '=dynamicPanel'
    },
    controller: '@',
    name: 'ctrlName'
  };   
});

我希望得到这样的面板配置：

  vm.panel = {
    controller: 'FontCtrl',
    template: 'font.template.html'
  };

然后我可以像这样加载面板：

<div class="options-panel" 
     ng-if="vm.panel" 
     dynamic-panel="vm.panel" 
     ctrl-name="{{ vm.panel.controller }}" 
     ng-include="vm.panel.template">

</div>

不幸的是，这不起作用。我收到错误Badly formed controller string。此外，似乎只有文本绑定适用于 name 属性 (@)。

有没有办法将name 属性绑定到动态值或指令中动态控制器的替代方案。

【问题讨论】：

看看这个 jsFiddle。 jsfiddle.net/Pawel_Gerr/y22ZK

标签： angularjs

【解决方案1】：

我最终通过采用组件模式解决了这个问题。通过使用他们自己的控制器将我的选项面板注册为单独的指令，它只是呈现指令标记的问题，例如<font-options/> 然后编译“动态面板”。

http://plnkr.co/edit/Ickkz1GGbDdSbUOUcvfj?p=preview

【讨论】：