Question

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

我无法找到相关文档，但现在看来可以使用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属性绑定到动态值或指令中动态控制器的替代。

Answer 1

我最终通过拥抱组件模式来理解它。通过将我的选项面板作为单独的指令注册到他们自己的控制器，它只是成为渲染指令标记的问题，例如<font-options/>然后编译＆＃34;动态面板＆＃34;。

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

具有动态控制器的

1 个答案: