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>

我希望有一个优雅的“棱角分明”代码，能够做到这一点，理想情况下不使用“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)

        }
    }
}])

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

如何以编程方式计算AngularJS中HTML元素（指令）的属性名称？

1 个答案: