1

我正在使用 AngularJS 构建仪表板，并且创建了一个“小部件”指令。问题是小部件可以是多种类型的小部件之一，我根据指令上的某个属性来改变它。这对于模板来说真的很容易，我可以从函数中的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>
4

1 回答 1

1

有更多的方法可以做到这一点。我自己用 AngularJS 制作了一个可向下钻取的仪表板，呵呵，我也遇到了类似的问题。

最简单的可能是只使用命名约定。因此，无论小部件被称为什么，无论是“PieChartWidget”还是其他 - 您只需将其与“Controller”（或您用于控制器的任何后缀）连接起来，并将其作为您调用的属性ng-controller的值$compile指示。

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

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

如果您需要任何进一步的说明或想要小提琴或演示上述任何概念的东西，请告诉我。

编辑

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

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

于 2013-08-29T00:31:07.417 回答