Question

我有一个主要在Jquery中编写的Web应用程序，它本质上是一个用户可以添加任意数量的自定义小部件的仪表板。我有用户当前添加的小部件，所以当它加载时我将每个小部件主要附加到DOM。我想努力将其转换为Angular应用程序，但是我遇到了一个主要问题。

1）我可以将每个小部件重新创建为一个指令，它可以很好地工作。然而，我所挣扎的是如何添加用户在加载时设置的每个小部件。我解决这个问题的第一个尝试是创建一个通用的widget指令，并进行ng-repeat，并动态地为widget指定其controller / templateUrl。

理论上这看起来很棒但是我遇到了一些无法通过属性动态传递控制器名称的问题。如果我硬编码一个字符串值它会工作，但在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>

有没有人对如何实现这一目标有任何见解？

Answer 1

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

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

这是一个工作的插图，说明了整个想法：http://plnkr.co/edit/dBqHRqChy17U8pFI9PXH

我知道这是一种混乱的解决方案，我很确定这可以通过更简单的方式完成。

Angular 1.4：动态添加指令到标记

1 个答案: