javascript - 如何以编程方式计算 AngularJS 中 HTML 元素(指令)的属性名称？

Question

我在 AngularJS 中定义了这些属性限制指令:

<div data-pie-chart data="..."></div>
<div data-line-chart data="..."></div>
<div data-column-chart data="..."></div>

渲染页面时，我从服务器加载 JSON 格式的图表列表，例如:

[ { chartType: "pie", data: [ 1, 1, 1, 1, 1 ] },
  { chartType: "pie", data: [ 2, 2, 2, 2, 2 ] },
  { chartType: "pie", data: [ 3, 3, 3, 3, 3 ] },
  { chartType: "column", data: [ 4, 4, 4, 4, 4 ] },
  { chartType: "column", data: [ 5, 5, 5, 5, 5 ] } ]

我想使用ng-repeat(或类似的)来生成以下代码:

<div data-pie-chart data="[1,1,1,1,1]"></div>
<div data-pie-chart data="[2,2,2,2,2]"></div>
<div data-pie-chart data="[3,3,3,3,3]"></div>
<div data-column-chart data="[4,4,4,4,4]"></div>
<div data-column-chart data="[5,5,5,5,5]"></div>

我想要一个优雅的“Angular ”代码，能够做到这一点，理想情况下不需要利用“ng-switch”或“ng-if”，因为图表列表不受限制并且一开始就不知道(可以随时添加新类型的图表)。

我可以以某种方式计算属性的名称吗？这样我就不需要对所有这些进行硬编码？

Answer 1

我使用外部指令和内部模板做了类似的事情。一旦类型已知，外部指令负责编译内部图表指令。

包装指令

.directive( 'chartWrapper', [ '$compile', function($compile){
    return {
        scope: { data: '=', type: '=' },
        link: function($scope, elem, attrs){
            var dom = '<div ' + $scope.type + ' data="' + $scope.data + '"/>'
            var el = angular.element(dom)
            $compile(el)($scope)
            elem.append(el)

        }
    }
}])

我还没有测试过这个，因为它与我自己的情况有点不同，但应该开始。