Question

我正在AngularJS中构建一个仪表板，我已经创建了一个“widget”指令。问题是窗口小部件可以是多种类型的窗口小部件之一，我根据指令的某个属性改变它。这对于模板来说非常简单，我可以从attributes函数中的link对象获取属性，获取模板并进行编译。

然而，对于控制器来说，它似乎更难（或者我只是错过它）。到目前为止我所拥有的是：

return ['$compile', '$http', function($compile, $http) {
    var templateContent = '';

    return {
        restrict: 'A',
        scope: {},
        link: function($scope, element, attributes, controller) {
            element.append($compile(templateContent)($scope));
            ...
        }
    };
}];

我正在寻找一种基于元素属性动态设置控制器的方法。这可能吗？我不想在元素上显式设置data-ng-controller，因为我试图让HTML只包含它想要加载的小部件的类型（不必担心它的模板位置或控制器）

理想情况下，它看起来像这样：

<div data-widget="typename">...</div>

Answer 1

这不仅仅是这样做的方法。我用AngularJS制作了一个可钻取的仪表板，我自己，嘿，我有类似的问题。

最简单的方法是使用命名约定。因此无论调用哪个小部件，无论是“PieChartWidget”还是其他任何东西 - 您只需将其与“Controller”（或您为控制器使用的任何后缀）连接起来，并将其作为ng-controller属性的值。你在你的指令中打电话给$compile。

如果您不喜欢基于约定的事物，您可以创建一个名为“widgetControllers”的服务，它就像一个字典，并且在运行块内部，使用服务的控制器名称注册每种类型的窗口小部件。然后，在上面的指令中，请求服务并查找要使用的控制器的名称。

最后你应该考虑（如果你还没有 - 这就是我所做的）为每种类型的小部件而不是控制器/模板组合制定指令。然后基本上有一个generic-widget指令，它将查看其type属性，并使用上述两种方法之一（约定或服务字典）创建正确指令的元素。这个通用小部件可以接收小部件的数据（即表格）和配置（即颜色，x轴格式等），并将它们传递到它创建的指令中。这对我所做的事情特别有用，因为一个小部件可以递归地包含其他小部件。

如果您需要进一步澄清或想要一个小提琴或某些证明上述任何概念，请告诉我。

修改

有人想要一个例子，所以在这里。

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

选择基于属性AngularJS的Controller

1 个答案: