Javascript Angular 1.4：向标记动态添加指令

我有一个主要用Jquery编写的web应用程序，它本质上是一个仪表板，用户可以向其中添加任意数量的自定义小部件。我有用户当前添加的小部件，所以当它加载时，我会将每个小部件都添加到DOM中。我想把它转换成一个角度的应用程序，但我在一个主要问题上绊倒了

1） 我可以将每个小部件重新创建为一个指令，这将很好地工作。然而，我正在努力解决的是如何添加用户在加载时设置的每个小部件。我解决这个问题的第一次尝试是创建一个通用的widget指令，执行ng repeat，并动态地为widget分配其控制器/模板URL

理论上这看起来很棒，但是我遇到了一些问题，无法通过属性动态传递控制器名称。如果我硬编码一个字符串值，它会工作，但不会在ng repeat中使用数据绑定属性。下面的示例不起作用

<quidget ng-dynamic-controller="quidget.QuidgetName" ng-repeat="quidget in tab.quidgets track by $index"></quidget>

如果我传入的不是quidget.QuidgetName，而是控制器的实际名称，那么它会工作……就像这样

<quidget ng-dynamic-controller="quidget1Controller" ng-repeat="quidget in tab.quidgets track by $index"></quidget>

---

有人对我如何实现这一点有什么见解吗？

您可以在该小部件的模板中定义控制器的名称，而不是将控制器名称动态传递给指令（假设每个小部件都有不同的模板）。例如，您只需将小部件名称传递给控制器：

<quidget ng-repeat="quidget in quidgets" name="quidget.name">

接下来，在quidget指令的模板中，您可以根据小部件的名称有条件地加载模板，如下所示：

<div  ng-switch on="name">

    <div ng-switch-when="widget1" >
        <ng-include src="'widget1.html'"></ng-include>
    </div>

    <div ng-switch-when="widget2" >
        <ng-include src="'widget2.html'"></ng-include>
    </div>

</div>

<p ng-controller="widget1Ctrl">This is widget1.</p>

在每个小部件的模板中，定义控制器名称如下：

<div  ng-switch on="name">

    <div ng-switch-when="widget1" >
        <ng-include src="'widget1.html'"></ng-include>
    </div>

    <div ng-switch-when="widget2" >
        <ng-include src="'widget2.html'"></ng-include>
    </div>

</div>

<p ng-controller="widget1Ctrl">This is widget1.</p>

这是widget1

下面是一个工作的plunker，它说明了整个想法：

我知道这是一种混乱的解决方案，我确信这可以用一种更简单的方式来完成。

可能的重复